svg_svga - CSDN
svg 订阅
可缩放矢量图形(Scalable Vector Graphics,SVG)是W3C推出的基于XML的二维矢量图形标准。SVG可以提供高质量的矢量图形渲染,同时由于支持JavaScript和文档对象模型,SVG图形通常具有强大的交互能力。另一方面,SVG作为W3C所推荐的基于XML的开放标准,能够与其他网络技术进行无缝集成。 [1] 展开全文
可缩放矢量图形(Scalable Vector Graphics,SVG)是W3C推出的基于XML的二维矢量图形标准。SVG可以提供高质量的矢量图形渲染,同时由于支持JavaScript和文档对象模型,SVG图形通常具有强大的交互能力。另一方面,SVG作为W3C所推荐的基于XML的开放标准,能够与其他网络技术进行无缝集成。 [1]
信息
简    称
SVG
本    质
二维矢量图形标准
中文名
可缩放矢量图形
外文名
Scalable Vector Graphics
SVG简介
SVG是一种开放标准的矢量图形语言,可设计激动人心的、高分辨率的Web图形页面,因为软件提供了制作复杂元素的工具,如渐变、嵌人字体、透明效果、动画和滤镜效果并且可使用平常的字体命令插人到HTML编码中。2000年8月2日,W3C最终发布了SVG候选推荐标准,并希望开发者尽早开始实施SVG。2000年年底SVG推荐标准制定完毕。SVG是一种新型的矢量图形标准,同时它也是一种矢量图形描述的一种标准的语言,这种语言具有非常强的开放性,所以其在应用的过程中主要的对象是网络。SVG在应用的过程中可以适应三种三种形式的图像对象,各种图像对象都可以在实际的工作中对对象进行全面的组合和处理,同时还能按照实际的需要更改其自身的形式,将其定义成预处理的对象。 [2] 
收起全文
精华内容
参与话题
  • SVG 快速入门

    千次阅读 2017-11-09 14:31:01
    SVG 全称是 Scalable Vector Graphics,即,矢量图。在 Web 中使用 SVG 可以解决位图放大失真的问题。首先,不要把 SVG 和 CSS,Canvas,HTML 搞混。他们之间并没有你中有我,我中有你的关系。SVG 是通过 XML 的形式...

    SVG 全称是 Scalable Vector Graphics,即,矢量图。在 Web 中使用 SVG 可以解决位图放大失真的问题。首先,不要把 SVG 和 CSS,Canvas,HTML 搞混。他们之间并没有你中有我,我中有你的关系。SVG 是通过 XML 的形式写在 HTML 文档中的。

    如何书写

    <svg x="0px" y="0px" width="450px" height="100px" viewBox="0 0 450 100">
         <rect x="10" y="5" fill="white" stroke="black" width="90" height="90"></rect>
         <circle fill="white" stroke="black" cx="170" cy="50" r="45"></circle>
         <polygon fill="white" stroke="black" points="279,5 294,35 328,40 303,62
          309,94 279,79 258,94 254,62 230,39 263,35"></polygon>
         <line fill="none" stroke="black" x1="410" y1="95" x2="440" y2="6"></line>
         <line fill="none" stroke="black" x1="360" y1="6" x2="360" y2="95"></line>
    </svg>

    大家看 svg 标签中带有一个 viewBox 的属性。这其实是 SVG 中一个很重要的概念,后面的缩放都会与它有关。
    说到这里,我们就需要了解一下关于 SVG 的几个基本概念。

    基本概念

    简单来说有 3 个基本概念:

    • viewport: 物理窗口
    • viewbox: 实物窗口(算了,下面解释)
    • preserveAspectRatio: 保留横纵比

    我们接下来,一个一个的进行讲解吧。

    viewport

    参照上面的 demo,这实际上就是你用 x,y,width,height。这 4 个属性,在页面上固定的矩形区域。

    viewbox

    定义 SVG 元素在 viewport 中的具体尺寸比例。假设有如下内容:

    <svg width="500" height="200" viewBox="0 0 50 20">
     <rect x="20" y="10" width="10" height="5" style="stroke: #000000; fill:none;"></rect>
    </svg>
    • viewport 为 [0,0] 到 [500,200]
    • viewbox 为 [0,0] 到 [50,20]

    默认情况下 SVG 是自动填充满 viewport 的。注意,在 SVG 中,子标签的所有尺寸都是不能带单位的,因为初始单位就是根据上面两个概念确定。
    当为以上情况,SVG 中基本的尺寸则不是 1px,而是 500/50 = 10px。所以,如下的图形大小为:

    <rect x="20" y="10" width="10" height="5" style="stroke: #000000; fill:none;">
    </rect>

    也就是在 SVG 里面定义的 rect 图形,它的实际尺寸为 [200,100] 到 [100,50]。

    preserveAspectRatio

    该属性就是用来定义上面 viewport 和 viewbox 相互对齐的方式。换句话就是说,它的属性可以改变 viewbox 的具体位置。基本格式为:

    <align> [<meetorslice>]
    </meetorslice></align>
    • align: 定义 viewport 和 viewbox 的对齐方式,分为 x,y 轴两个方向。X 轴方向有三种方式:左边重合(xMin),x 轴中点重合(xMid),右边重合(xMax)。同理,Y 轴也有 顶边重合(YMin),y 轴中点重合(YMid),底边边重合(YMax)
    • meetOrSlice: 主要就是定义该 SVG 是内嵌,还是裁剪或是 none(听天有命)。

    其中,align 需要着重理解一下。首先,它的默认值为 xMidYMid,即为中点重合。
    61401

    可以从图中看出,viewbox 是通过中心进行延展的。注意,它的原点坐标还是在 viewbox 的左上角。如果你是动态增加尺寸的话,此时并不是从左到右增加,而是从中心向两端扩张。同理,如果你使用的是 xMinYMin 的话,那么如果存在尺寸变化,那么相对点则是从左上角开始的。简单来说,align 相对点其实一共有 9 个。
    61402
    然后就是 meet || slice || none 这三个属性具体干的事情。
    在这之前,我们需要了解一个公式–缩放比计算公式:

    vb_h * rat_y = vp_h; 或者 vb_w * rat_x = vp_w;
    其中,vb_ 为 viewbox 简写,vp_ 为 viewport 的简写。vb_h 代表就是 viewbox height。vb_w 代表就是 viewbox width。rat_x/y 代表的是 x,y 轴的缩放比例。
    假设有下列情况:

    <svg width="400" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin slice" style="border:1px solid #cd0000;">
        <rect x="10" y="10" width="150" height="150" fill="#cd0000"></rect>
    </svg>

    那么,rat_x 和 rat_y 分别为:

    • rat_x = 400/200 = 2
    • rat_y = 200/200 = 1

    现在,针对上面 meet/slice 不同的取值,实际应用到 svg 里面的缩放比例是不同的。

    • meet(默认值): 本意是让 svg 尽可能的显示在 viewport 里,即,会在 rat_x 和 rat_y 中选择最小的值作为缩放标准。
    • slice: 本意是让 svg 完全铺满 viewport,即,会在 rat_x 和 rat_y 中选择最大的值作为缩放标准。

    所以针对不同的取值,基准比例也不同。
    当为 meet 的情况,那么实际缩放比例为 1。则里面实际矩形的大小就为 (10,10) 到 (150,150)。
    61403
    当为 slice 的情况,那么实际缩放比例为 2。则里面实际矩形的大小就为 (20,20) 到 (300,300)。
    61404
    如果你的值为 none 的话,他会直接铺满整个 viewport,即,实际矩形大小为:(20,10) 到 (300,150)。
    61405

    响应式 SVG

    虽然讲起响应式,一些童鞋会想这 TM 又是啥奇技淫巧?
    对不起,并不是。。。就是一个 viewbox 并且不带 width/height 而已。
    看个实际的例子吧:

    <svg viewBox="0 0 218.8 87.1">
         <g fill="none" stroke="#000">
           <path d="M7.3 75L25.9 6.8s58.4-6.4 33.5 13-41.1 32.8-11.2 30.8h15.9v5.5s42.6
             18.8 0 20.6"></path>
           <path d="M133.1 58.2s12.7-69.2 24.4-47.5c0 0 4.1 8.6 9.5.9 0 0 5-10 10.4.9 0
             0 12.2 32.6 13.6 43 0 0 39.8 5.4 15.8 15.4-13.2 5.5-53.8
             13.1-77.4 5.9.1 0-51.9-15.4 3.7-18.6z"></path>
    </g>
    </svg>

    可以看到,上面的 svg 标签并没有带上啥 width/height 属性,只是简单描述了 viewBox 的范围而已。当然,里面的尺寸标准都是在这 viewBox 的范围内进行设置的。
    另外,在这里声明一下,本文章并不是新手教程,也就是说,不会教你一步一步的画直线啊,圆啊,矩形啊等等这些基本图形。这些直接 google 一下,一搜一大把。所以,这里假设大家的水平是处于,能对 SVG 基本的图形属性熟悉即可,对一些高级属性还不是很清楚和熟练。OK,继续~
    在 SVG 中,能够直接使用的图形有:

    • rect
    • circle
    • ellipse
    • line
    • polyline
    • polygon

    上面没有啥说的,后面我详细说一下两个比较重要的概念,分组和 Path。

    分组和 Path

    通常 Path 和 分组通常是一起使用的,如上:

    <g fill="none" stroke="#000">
        <path d="M7.3 75L25.9 6.8s58.4-6.4 33.5 13-41.1 32.8-11.2 30.8h15.9v5.5s42.6
          18.8 0 20.6">
        <path d="M133.1 58.2s12.7-69.2 24.4-47.5c0 0 4.1 8.6 9.5.9 0 0 5-10 10.4.9 0
          0 12.2 32.6 13.6 43 0 0 39.8 5.4 15.8 15.4-13.2 5.5-53.8
          13.1-77.4 5.9.1 0-51.9-15.4 3.7-18.6z">
    </path></path></g>

    分组我们放到后面进行讲解,这里先看一下 Path。

    Path

    Path 在 SVG 中的地位应该是比较高的,实际上,利用 Path 这个一个标签可以画出任意的图形。path 中 d(data) 属性是用来定义相关线条数据,通常是以 M/m 为起始,代表的就是 move to 的意思。在 path 中,一共可以定义 10 种不同的图形。例如 M/m,L/l。 大家可以注意,每种标识符有两种书写方式,即,大小写。

    • 大写: 参照的是绝对坐标,即,SVG 的右上角
    • 小写: 参照的相对坐标,即,前一个点的坐标

    而在 10 中不同表示符中,又可以分为直线和曲线两种不同的标识符。这里,我们分类来讲解一下。

    线型

    该使用定义起始点的,没啥特殊的作用。

    <path d="M10 10">
    </path>

    表示,以 (10,10) 为起始点。

    L/l
    原意是 Line to,用来画线段的。格式和 M/m 差不多:

    L x y (or l dx dy)

    H/h
    用来画水平线,即,Horizontal。既然方向已经定了,剩下的就是距离,格式很简单:

    H x (or h dx)

    V/v
    用来画竖直线,即,vertical。同上,方向也定了,格式为:

    V y (or v dy)

    看个例子吧

    <path d="M10 10 H 90 V 90 H 10 L 10 10">
    </path>

    该 path 实际上就是画了一个正方形,宽 = 高 = 90。
    61406
    Z/z
    该标识符用来表示 path 的结束,并且将最后一点和 M/m 标识开头的一点连接起来。所以,它不存在什么表示点之类的,格式为:

    Z (or z)

    而上面也可以进行相关的优化,最终的结果为:

    <path d="M10 10 H 90 V 90 H 10 L 10 10">
    // 使用 Z
    <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black">
    </path></path>

    曲线

    曲线就是 Web 画图中常见的 Bezier Curves(贝塞尔),Arcs,several Bezier curves(很多贝塞尔 – .-)等。
    我们简单看一下:
    C/c
    61407
    基本格式为:

    C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)

    例如:

    <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent">
    </path>

    S/s
    该标识符实际上使用来表示一个反射贝塞尔,即,在原有贝塞尔上再加一段贝塞尔曲线,所以,S/s 一般和 C/c 一起使用。
    基本格式为:

    S x2 y2, x y (or s dx2 dy2, dx dy)

    实际样式图为:
    61408
    相当于原有的贝塞尔曲线的最后一段进行反向延长并对称。然后加上新定义的一段限制曲线。
    具体实例为:

    <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent">
    </path>

    Q/q
    该标识符是用来定义二次(quadratic)贝塞尔曲线,该曲线相当于上面传统的贝塞尔来说,更加简单,它只需要定义三个点,即可完整一个贝塞尔曲线,具体作图过程如下
    61409
    基本格式为:

    Q x1 y1, x y (or q dx1 dy1, dx dy)

    即为图上点, P1(x1,y1),P2(x,y)

    起始点为 M 定义的点,例如

    <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent">
    </path>

    T/t
    该标识符和 S 差不多,也是一个贝塞尔曲线的延长。相当于原曲线的控制点 P1 相当于 end point P2 做对称,然后,只需要定义一个终点即可,即,T/t 只需要定义贝塞尔曲线里面的终点即可:

    T x y (or t dx dy)

    如图:
    614010
    所以,简单来说,C/S,Q/T 是两两搭配一起使用的。在使用的时候,千万不要搞混即可。

    弧线

    A/a
    该曲线是用来画弧线(Arcs),而,弧线通常是圆/椭圆的一部分。当,椭圆的两个轴径长相等则为圆,所以,A/a 是按照椭圆作为基准格式:

    A rx ry x-axis-rotation large-arc-flag sweep-flag x y
     a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

    说实在的,这个比较复杂。因为,他画椭圆的方式和我们平常不一样,一般情况下,椭圆只要确定一个中心,然后是长短轴,然后是弧度范围即可。

    但是,它这里是通过椭圆上的两点来确定的,在加上旋转角度,俩轴径等因素来确定的。另外,需要注意,它的起始点是从上一个命令的结束点位置开始计算的。OK,我们首先简单了解一下格式里面的参数:

    • rx,ry: 代表的就是长轴短轴,没得说。
    • x,y: 代表的是弧长的结束点。开始点就是上一个命令的终点。
    • x-axis-rotation: x 轴的旋转角度。顺时针为正
    • large-arc-flag[0,1]: 表示取大弧还是小弧。因为两点之间的弧长有两部分。
    • sweep-flag[0,1]: 取顺时针的弧,还是逆时针的弧长。参考点是以起始点开始的。

    上面几个属性中,比较难理解的就是 large-arc-flag 和 sweep-flag。这么说吧,前面几个属性充其量只能确定椭圆的位置,和经过椭圆的两个点,不过,一般能通过指定两点的椭圆有两个,而通过这两点划分又会出现 4 段弧长。为了确定 4 个弧长中,是哪一个,需要两个值来确定。即,4 抽 2,2 抽 1。

    614011
    简单说一种,例如当,laf 和 sf 都为 0的情况。首先,laf 为 0 选择的是小弧长。所以,里面两段比较小的弧长被抽出来。然后,sf 为 0 选择的是逆时针。即,以起始点为参考,选择通过逆时针方向到达终点的那段弧。即,2 抽 1。最终得出我们需要的弧。
    说实在的,这个是真复杂。。。
    给一个参考 codepen
    一般情况下,我们并不需要手动来确定 path,有工具为啥不用工具呢!
    比如,Illustrator, Sketch 等,都可以自动生成 SVG。不过,生成之后,需要对代码做相关的压缩优化,这些都可以直接在编译器里面找到。
    你也可以用一下可视化工具 SVGOMG 来简单看一下。

    分组

    SVG 中的分组你可以理解为 PS 中的图层,一块图层里面通常只会放一下高内聚的图形,这样既方便移动又方便做动画。SVG 中的分组标签就是 g,使用 g 标签包裹的所有子元素都认同为一组。
    例如:

    <g>
        <circle cx="20" cy="20" r="20" fill="green">
        <circle cx="70" cy="70" r="20" fill="purple">
      </circle></circle></g>
      <g>
        <rect x="110" y="110" height="30" width="30" fill="blue">
        <rect x="160" y="160" height="30" width="30" fill="red">
      </rect></rect></g>

    需要注意的是,使用 g 进行分组,并不会改变原有元素的在屏幕上展示的效果。
    不过,g 标签除了分组,还有另外一个很重要的功能–动画

    分组动画
    在分组重定义动画是直接写在 transform 属性当中的。实际上,每个子标签都可以使用 transform 的相关属性。

    <g transform="translate(...) scale(...) rotate(...) translate(...) rotate(...)">
      ...
    </g>

    每种变换动画之间是通过 空格或逗号 连接的。它的执行顺序是从右到左。为啥呢?实际上可以理解为,这就是几个嵌套的 g 叠在一起。

    <g transform="translate(...) scale(...) rotate(...) translate(...) rotate(...)">
        ...
      </g>
      
      // Being Equivalent to this:
      <g transform="translate(...)">
       <g transform="scale(...)">
         <g transform="rotate(...)">
           <g transform="translate(...)">
             <g transform="rotate(...)">
               ...
             </g>
           </g>
         </g>
       </g>
     </g>

    具体可以使用的动画形式和 CSS 动画一模一样,详情可以参考: SVG 动画

    原文链接: https://www.villianhr.com/2017/04/17/SVG 快速入门

    展开全文
  • SVG 50个实例 SVG实例

    千次下载 热门讨论 2008-04-30 13:38:50
    50个左右SVG sample,是我学习SVG时候的留下的痕迹,初学者也许可以从中学到一些东西。 50个左右SVG sample,是我学习SVG时候的留下的痕迹,初学者也许可以从中学到一些东西。
  • svg 超详细 制作

    万次阅读 2018-08-04 20:37:05
    最近网站开发,发现网站用到 svg。感觉这么简单东西,随便弄弄就行。结果倒腾半天没弄好。还是去学习了一下。经验分享一下吧。给遇到同样问题的程序狗们一点指引,少走弯路。  网站上的点赞,点完后,显示已点赞。...

    最近网站开发,发现网站用到 svg。感觉这么简单东西,随便弄弄就行。结果倒腾半天没弄好。还是去学习了一下。经验分享一下吧。给遇到同样问题的程序狗们一点指引,少走弯路。

     网站上的点赞,点完后,显示已点赞。

    我做的效果图

    这种图不是普通的加个 jpg或者png就行。它是跟html标签差不多可以,指定属性就改变颜色的

    <svg style="fill:red" version="1.1"
         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
         x="0px" y="0px" width="1024px" height="1024px" viewBox="-31.873 29.659 1024 1024"
         enable-background="new -31.873 29.659 1024 1024" xml:space="preserve">
    <path fill-rule="evenodd" clip-rule="evenodd" fill="" stroke="" stroke-miterlimit="10" d="M999.127,161.027
         M475.127,939.027 M40.5,899.659c0,0-40-355.999-40-441.999s82-92,82-92s176-10,220-8s22,38,58,36s134-174,102-236s-2-138,70-154
        s134,30,180,110s30,208,30,208s104,0,146,0s70,48,86,94s-26,154-28,148s2,30,16,74s-18,64-20,64s16,38,0,80
        c-16,41.999-38,49.999-38,51.999s22,22-22,82s-98,68-98,68s-384,0-386,0s-46-22-56-20s-36,20-36,20h-174
        C72.5,983.659,40.5,899.659,40.5,899.659z M514.127,273.395c0-128,28-192,38-202s94,4,124,122s-14,195.631-14,195.631
        s304,4.369,226,2.369s54-20,34,86s-88,64-64,68s54,66,42,104s-52,36-46,37s44-3,32,59s-68,56-68,60s44,16,26,54s-70,56-70,56
        s-306,0-354,0s-54-28-54-28v-430C408.127,405.395,514.127,401.395,514.127,273.395z M274.313,915.198v-484h-198c0,0-26-5.999-28,18
        c-2,24,40,442,40,442s20,24,34,24S274.313,915.198,274.313,915.198z"/>
    </svg>

    像这样,指定一下 style fill 就能变成红色

    具体制作过程

    打开 ai 新建文件

    2 钢笔工具

    绘制 三个路径

    两个小的路径,选中 右击 排列 置于顶层 三个路径放到一起

    ctrl F11 

    选择

    使用奇偶填充规则

    然后选中 三个对象 依次点击  对象 复合路径 建立

    存储为web格式,选择 svg即可

    都看到这里了,是时候打赏一下啦!!!!!!!!!!!!!!!

    谢谢大爷

    谢谢大爷

    谢谢大爷

    谢谢大爷

    谢谢大爷

    谢谢大爷

    谢谢大爷

    谢谢大爷

    谢谢大爷

    谢谢大爷

    谢谢大爷

    谢谢大爷

    谢谢大爷

    谢谢大爷

    得到的代码

    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
        <!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
    ]>
    <svg version="1.1"
         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
         x="0px" y="0px" width="1024px" height="1024px" viewBox="-69.934 -169.91 1024 1024"
         enable-background="new -69.934 -169.91 1024 1024" xml:space="preserve">
    <defs>
    </defs>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#040000" stroke="#000000" stroke-miterlimit="10" d="M792.066,0.5
        l60.242,454.217L0.5,443.874V0.5H792.066z M437.464,69.174l20.481,321.688l321.688-43.373L757.945,78.813L437.464,69.174z
         M39.873,78.813l9.638,285.542l308.434-18.072L344.692,69.174L39.873,78.813z"/>
    </svg>

    然后把 绿色那俩地方删掉

    用style 填充颜色即可

    代码+效果图

    红色代码为 设置的颜色代码

    <svg style="fill:green" version="1.1"
         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
         x="0px" y="0px" width="1024px" height="1024px" viewBox="-69.934 -169.91 1024 1024"
         enable-background="new -69.934 -169.91 1024 1024" xml:space="preserve">
    <defs>
    </defs>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="" stroke="" stroke-miterlimit="10" d="M792.066,0.5
        l60.242,454.217L0.5,443.874V0.5H792.066z M437.464,69.174l20.481,321.688l321.688-43.373L757.945,78.813L437.464,69.174z
         M39.873,78.813l9.638,285.542l308.434-18.072L344.692,69.174L39.873,78.813z"/>
    </svg>

    展开全文
  • HTML5如何使用SVG

    万次阅读 2019-01-05 00:46:13
    代码优化永远是程序员亘古不变的需求,而合理的利用SVG图片来代替部分PNG/JPG等格式的图片则是前端优化重要的一环,既然是优化,那我们先来看看SVG图片都有哪些优势: SVG 可被非常多的工具读取和修改(比如记事本...

    代码优化永远是程序员亘古不变的需求,而合理的利用SVG图片来代替部分PNG/JPG等格式的图片则是前端优化重要的一环,既然是优化,那我们先来看看SVG图片都有哪些优势:

    • SVG 可被非常多的工具读取和修改(比如记事本)
    • SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。
    • SVG 是可伸缩的
    • SVG 图像可在任何的分辨率下被高质量地打印
    • SVG 可在图像质量不下降的情况下被放大
    • SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
    • SVG 可以与 Java 技术一起运行
    • SVG 是开放的标准
    • SVG 文件是纯粹的 XML

    #####几个SVG图片小例子:
    image
    #####我们来看一下第三个分享图标的代码:

    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
      <g stroke="#AAB0BA" fill="none" fill-rule="evenodd">
        <path d="M10.524 3.413v8.235" stroke-linejoin="round"/>
        <path d="M13.027 7.508c.813 0 1.678-.01 1.678-.01.449 0 .812.376.812.826l-.005 6.36a.819.819 0 0 1-.811.826H6.31a.822.822 0 0 1-.811-.826l.005-6.36c0-.456.36-.825.812-.825l1.689.006M8.373 5.111l2.143-2.09 2.143 2.07"/>
      </g>
    </svg>
    

    不了解SVG的同学现在一定一脸问号,就跟我第一次见他们一样,别着急,我们从基础看起。

    什么是SVG?

    SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。其他图像格式都是基于像素处理的,SVG 则是属于对图像的形状描述,所以它本质上是文本文件,体积较小,且不管放大多少倍都不会失真。此外SVG 是万维网联盟的标准,SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。

    怎么使用?

    在 HTML5 中,您能够将 SVG 元素直接嵌入 HTML 页面中,例如上面的那颗小红心:

    <body>
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
        <defs>
          <rect id="a" y="54" width="60" height="25" rx="1"/>
          <mask id="b" x="0" y="0" width="60" height="25" fill="#fff">
            <use xlink:href="#a"/>
        </mask>
        </defs>
        <g transform="translate(-9 -56)" fill="none" fill-rule="evenodd">
          <use stroke="#EDEEEF" mask="url(#b)" stroke-width="2" xlink:href="#a"/>
          <path d="M19.05 62.797c-.208-.268-1.776-2.188-3.629-1.725-.662.165-1.439.44-2.009 1.463-2.18 3.913 4.965 8.983 5.615 9.433V72l.023-.016.023.016v-.032c.65-.45 7.795-5.52 5.615-9.433-.57-1.023-1.347-1.298-2.009-1.463-1.853-.463-3.42 1.457-3.629 1.725z" fill="red"/>
        </g>
      </svg>
    </body>
    

    SVG 代码也可以写在一个以.svg结尾的文件中,然后用<img><object><embed><iframe>等标签插入网页。

    <img src="search.svg">
    <object id="object" data="search.svg" type="image/svg+xml"></object>
    <embed id="embed" src="search.svg" type="image/svg+xml">
    <iframe id="iframe" src="search.svg"></iframe>
    

    CSS也可以使用svg

    .logo {
      background: url(logo.svg);
    }
    

    SVG 文件还可以转为 BASE64 编码,然后作为 Data URI 写入网页。

    <img src="data:image/svg+xml;base64,[data]">
    

    SVG的语法

    1. <svg>标签
    SVG 代码都放在顶层标签<svg>之中。下面是一个例子。

    <svg width="100%" height="100%">
      <circle id="mycircle" cx="50" cy="50" r="50" />
    </svg>
    

    <svg>的width属性和height属性,指定了 SVG 图像在 HTML 元素中所占据的宽度和高度。除了相对单位,也可以采用绝对单位(单位:像素)。如果不指定这两个属性,SVG 图像默认大小是300像素(宽) x 150像素(高)。

    如果只想展示 SVG 图像的一部分,就要指定viewBox属性。

    <svg width="100" height="100" viewBox="50 50 50 50">
      <circle id="mycircle" cx="50" cy="50" r="50" />
    </svg>
    

    <viewBox>属性的值有四个数字,分别是左上角的横坐标和纵坐标、视口的宽度和高度。上面代码中,SVG 图像是100像素宽 x 100像素高,viewBox属性指定视口从(50, 50)这个点开始。所以,实际看到的是右下角的四分之一圆。

    注意,视口必须适配所在的空间。上面代码中,视口的大小是 50 x 50,由于 SVG 图像的大小是 100 x 100,所以视口会放大去适配 SVG 图像的大小,即放大了四倍。

    如果不指定width属性和height属性,只指定viewBox属性,则相当于只给定 SVG 图像的长宽比。这时,SVG 图像的默认大小将等于所在的 HTML 元素的大小。

    2. <circle>标签
    <circle>标签代表圆形。

    <svg width="300" height="180">
      <circle cx="30"  cy="50" r="25" />
      <circle cx="90"  cy="50" r="25" class="red" />
      <circle cx="150" cy="50" r="25" class="fancy" />
    </svg>
    

    上面的代码定义了三个圆。<circle>标签的cx、cy、r属性分别为横坐标、纵坐标和半径,单位为像素。坐标都是相对于<svg>画布的左上角原点。

    class属性用来指定对应的 CSS 类。

    .red {
      fill: red;
    }
    
    .fancy {
      fill: none;
      stroke: black;
      stroke-width: 3pt;
    }
    

    SVG 的 CSS 属性与网页元素有所不同。

    fill:填充色
    stroke:描边色
    stroke-width:边框宽度

    3. <line>标签
    <line>标签用来绘制直线。

    <svg width="300" height="180">
      <line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:5" />
    </svg>
    

    上面代码中,标签的x1属性和y1属性,表示线段起点的横坐标和纵坐标;x2属性和y2属性,表示线段终点的横坐标和纵坐标;style属性表示线段的样式。

    4. <polyline>标签
    <polyline>标签用于绘制一根折线。

    <svg width="300" height="180">
      <polyline points="3,3 30,28 3,53" fill="none" stroke="black" />
    </svg>
    

    <polyline>的points属性指定了每个端点的坐标,横坐标与纵坐标之间与逗号分隔,点与点之间用空格分隔。

    5. <rect>标签
    <rect>标签用于绘制矩形。

    <svg width="300" height="180">
      <rect x="0" y="0" height="100" width="200" style="stroke: #70d5dd; fill: #dd524b" />
    </svg>
    

    <rect>的x属性和y属性,指定了矩形左上角端点的横坐标和纵坐标;width属性和height属性指定了矩形的宽度和高度(单位像素)。

    6. <ellipse>标签
    <ellipse>标签用于绘制椭圆。

    <svg width="300" height="180">
      <ellipse cx="60" cy="60" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver"/>
    </svg>
    

    <ellipse>的cx属性和cy属性,指定了椭圆中心的横坐标和纵坐标(单位像素);rx属性和ry属性,指定了椭圆横向轴和纵向轴的半径(单位像素)。

    7. <polygon>标签
    <polygon>标签用于绘制多边形。

    <svg width="300" height="180">
      <polygon fill="green" stroke="orange" stroke-width="1" points="0,0 100,0 100,100 0,100 0,0"/>
    </svg>
    

    <polygon>的points属性指定了每个端点的坐标,横坐标与纵坐标之间与逗号分隔,点与点之间用空格分隔。

    8. <path>标签
    <path>标签用于制路径。

    <svg width="300" height="180">
    <path d="
      M 18,3
      L 46,3
      L 46,40
      L 61,40
      L 32,68
      L 3,40
      L 18,40
      Z
    "></path>
    </svg>
    

    <path>的d属性表示绘制顺序,它的值是一个长字符串,每个字母表示一个绘制动作,后面跟着坐标。

    M:移动到(moveto)
    L:画直线到(lineto)
    Z:闭合路径
    9. <text>标签
    <text>标签用于绘制文本。

    <svg width="300" height="180">
      <text x="50" y="25">肆客足球</text>
    </svg>
    

    <text>的x属性和y属性,表示文本区块基线(baseline)起点的横坐标和纵坐标。文字的样式可以用class或style属性指定。

    10. <use>标签
    <use>标签用于复制一个形状。

    <svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
      <circle id="myCircle" cx="5" cy="5" r="4"/>
    
      <use href="#myCircle" x="10" y="0" fill="blue" />
      <use href="#myCircle" x="20" y="0" fill="white" stroke="blue" />
    </svg>
    

    <use>的href属性指定所要复制的节点,x属性和y属性是<use>左上角的坐标。另外,还可以指定width和height坐标。

    11. <g>标签
    <g>标签用于将多个形状组成一个组(group),方便复用。

    <svg width="300" height="100">
      <g id="myCircle">
        <text x="25" y="20">圆形</text>
        <circle cx="50" cy="50" r="20"/>
      </g>
    
      <use href="#myCircle" x="100" y="0" fill="blue" />
      <use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
    </svg>
    

    12. <defs>标签
    <defs>标签用于自定义形状,它内部的代码不会显示,仅供引用。

    <svg width="300" height="100">
      <defs>
        <g id="myCircle">
          <text x="25" y="20">圆形</text>
          <circle cx="50" cy="50" r="20"/>
        </g>
      </defs>
    
      <use href="#myCircle" x="0" y="0" />
      <use href="#myCircle" x="100" y="0" fill="blue" />
      <use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
    </svg>
    

    13. <pattern>标签
    <pattern>标签用于自定义一个形状,该形状可以被引用来平铺一个区域。

    <svg width="500" height="500">
      <defs>
        <pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
          <circle fill="#bee9e8" cx="50" cy="50" r="35" />
        </pattern>
      </defs>
      <rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
    </svg>
    

    上面代码中,<pattern>标签将一个圆形定义为dots模式。patternUnits="userSpaceOnUse"表示<pattern>的宽度和长度是实际的像素值。然后,指定这个模式去填充下面的矩形。

    14. <image>标签
    <image>标签用于插入图片文件。

    <svg viewBox="0 0 100 100" width="100" height="100">
      <image xlink:href="path/to/image.jpg"
        width="50%" height="50%"/>
    </svg>
    

    上面代码中,<image>xlink:href属性表示图像的来源。

    15. <animate>标签
    <animate>标签用于产生动画效果。

    <svg width="500px" height="500px">
      <rect x="0" y="0" width="100" height="100" fill="#feac5e">
        <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
      </rect>
    </svg>
    

    上面代码中,矩形会不断移动,产生动画效果。

    <animate>的属性含义如下。

    attributeName:发生动画效果的属性名。
    from:单次动画的初始值。
    to:单次动画的结束值。
    dur:单次动画的持续时间。
    repeatCount:动画的循环模式。
    可以在多个属性上面定义动画。

    <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
    <animate attributeName="width" to="500" dur="2s" repeatCount="indefinite" />
    

    16. <animateTransform>标签
    <animate>标签对 CSS 的transform属性不起作用,如果需要变形,就要使用标签。

    <svg width="500px" height="500px">
      <rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
        <animateTransform attributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200" to="360 400 400" repeatCount="indefinite" />
      </rect>
    </svg>
    

    上面代码中,<animateTransform>的效果为旋转(rotate),这时from和to属性值有三个数字,第一个数字是角度值,第二个值和第三个值是旋转中心的坐标。from="0 200 200"表示开始时,角度为0,围绕(200, 200)开始旋转;to="360 400 400"表示结束时,角度为360,围绕(400, 400)旋转。

    JavaScript 操作SVG

    1. DOM操作
    如果 SVG 代码直接写在 HTML 网页之中,它就成为网页 DOM 的一部分,可以直接用 DOM 操作。

    <svg
      id="mysvg"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 800 600"
      preserveAspectRatio="xMidYMid meet"
    >
      <circle id="mycircle" cx="400" cy="300" r="50" />
    <svg>
    

    上面代码插入网页之后,就可以用 CSS 定制样式。

    circle {
      stroke-width: 5;
      stroke: #f00;
      fill: #ff0;
    }
    
    circle:hover {
      stroke: #090;
      fill: #f8f8f8;
    }
    

    然后,可以用 JavaScript 代码操作 SVG。

    var mycircle = document.getElementById('mycircle');
    
    mycircle.addEventListener('click', function(e) {
      console.log('circle clicked - enlarging');
      mycircle.setAttribute('r', 60);
    }, false);
    

    上面代码指定,如果点击图形,就改写circle元素的r属性。

    2. 获取 SVG DOM
    使用<object><iframe><embed>标签插入 SVG 文件,可以获取 SVG DOM。

    
    var svgObject = document.getElementById('object').contentDocument;
    var svgIframe = document.getElementById('iframe').contentDocument;
    var svgEmbed = document.getElementById('embed').getSVGDocument();
    

    注意,如果使用标签插入 SVG 文件,就无法获取 SVG DOM。

    3. 读取 SVG 源码
    由于 SVG 文件就是一段 XML 文本,因此可以通过读取 XML 代码的方式,读取 SVG 源码。

    <div id="svg-container">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        xml:space="preserve" width="500" height="440"
      >
        <!-- svg code -->
      </svg>
    </div>
    

    使用XMLSerializer实例的serializeToString()方法,获取 SVG 元素的代码。

    var svgString = new XMLSerializer()
      .serializeToString(document.querySelector('svg'));
    

    4. SVG 图像转为 Canvas 图像
    首先,需要新建一个Image对象,将 SVG 图像指定到该Image对象的src属性。

    var img = new Image();
    var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
    
    var DOMURL = self.URL || self.webkitURL || self;
    var url = DOMURL.createObjectURL(svg);
    
    img.src = url;
    

    然后,当图像加载完成后,再将它绘制到<canvas>元素。

    img.onload = function () {
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
    };
    

    小结

    SVG能做的远不止这些,利用SVG做的动画效果,文字效果我们以后给大家详细讲解,今天就先到这里吧。

    ###技术放肆聊QQ群:617413307 欢迎程序员朋友积极加群,共同进步
    ###技术放肆聊公众号,每日干货,最前沿的技术知识,扫描下方二维码关注:
    技术放肆聊

    展开全文
  • 走入SVG

    千人学习 2017-07-12 21:08:27
    SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C("World Wide Web ConSortium 在2000年8月制定的一种新的二维矢量图形格式,也是规范中...
  • 使用svg图片

    千次阅读 2019-02-19 14:08:35
    使用svg图片IOS 使用SVG图标一,使用第三方框架 SVGKit1. svg 图片显示 OC 代码2. svg 图片显示 swift 代码3. svg 集成方式二,使用UIWebView/WKWebView进行加载Android 使用SVG图标新的改变功能快捷键合理的创建...

    SVG文件简介

    SVG文件是矢量图标准之一,特点是可以缩放,并且可以用可以阅读的源代码的方式(而不是二进制)来存储图形信息。比如如下文件就是一个svg文件:<svgxmlns=“http://www.w3.org/2000/svg"viewBox="00350100”><markerid="arrowhead"markerWidth="10"markerHeight=&q

    SVG文件是矢量图标准之一,特点是可以缩放,并且可以用可以阅读的源代码的方式(而不是二进制)来存储图形信息。比如如下文件就是一个svg文件:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 100"> 
    <defs> 
    <marker id="arrowhead" markerWidth="10" markerHeight="7" 
    refX="0" refY="3.5" orient="auto"> 
    <polygon points="0 0, 10 3.5, 0 7" /> 
    </marker> 
    </defs> 
    <line x1="0" y1="50" x2="250" y2="50" stroke="#000" 
    stroke-width="8" marker-end="url(#arrowhead)" /> 
    </svg> 
    
    

    它是一个箭头图。可以使用UIWebView视图加载此文件并显示。首先把SVG文件作为资源文件加入工程,命名为1.svg。

    IOS 使用SVG图标

    一,使用第三方框架 SVGKit

    1. svg 图片显示 OC 代码

    分类

    #import <UIKit/UIKit.h>
    
    @interface UIImage (SVGManager)
    /**
     show svg image
    
     @param name svg name
     @param size image size
     @return svg image
     */
    + (UIImage *)svgImageNamed:(NSString *)name size:(CGSize)size;
    @end
    
    
    #import "UIImage+SVGManager.h"
    #import "SVGKImage.h"
    
    @implementation UIImage (SVGManager)
    + (UIImage *)svgImageNamed:(NSString *)name size:(CGSize)size {
        SVGKImage *svgImage = [SVGKImage imageNamed:name];
        svgImage.size = size;
        return svgImage.UIImage;
    }
    @end
    
    
    

    SVGKImage类:

    /**
     show svg image
     
     @param name svg name
     @param size image size
     @param tintColor image color
     @return svg image
     */
    + (UIImage *)svgImageNamed:(NSString *)name size:(CGSize)size tintColor:(UIColor *)tintColor;
    
    
    + (UIImage *)svgImageNamed:(NSString *)name size:(CGSize)size tintColor:(UIColor *)tintColor {
        SVGKImage *svgImage = [SVGKImage imageNamed:name];
        svgImage.size = size;
        CGRect rect = CGRectMake(0, 0, svgImage.size.width, svgImage.size.height);
        CGImageAlphaInfo alphaInfo = CGImageGetAlphaInfo(svgImage.UIImage.CGImage);
        BOOL opaque = alphaInfo == kCGImageAlphaNoneSkipLast
        || alphaInfo == kCGImageAlphaNoneSkipFirst
        || alphaInfo == kCGImageAlphaNone;
        UIGraphicsBeginImageContextWithOptions(svgImage.size, opaque, svgImage.scale);
        CGContextRef context = UIGraphicsGetCurrentContext();
        CGContextTranslateCTM(context, 0, svgImage.size.height);
        CGContextScaleCTM(context, 1.0, -1.0);
        CGContextSetBlendMode(context, kCGBlendModeNormal);
        CGContextClipToMask(context, rect, svgImage.UIImage.CGImage);
        CGContextSetFillColorWithColor(context, tintColor.CGColor);
        CGContextFillRect(context, rect);
        UIImage *imageOut = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        return imageOut;
    }
    
    

    2. svg 图片显示 swift 代码

    1. swift中使用webview加载svg文件:
    //完整代码如下:
    
    import UIKit 
    @UIApplicationMain 
    class AppDelegate: UIResponder, UIApplicationDelegate { 
         var window: UIWindow? 
        func application(_ application: UIApplication,       didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool 
        { 
    	self.window = UIWindow(frame: UIScreen.main.bounds) 
    	let page = Page() 
    	page.view.backgroundColor = .blue 
    	self.window!.rootViewController = page 
    	self.window?.makeKeyAndVisible() 
    	return true 
    	} 
    } 
    class Page: UIViewController { 
    	var count = 0 
    	var webview : UIWebView! 
    	var webview1 : UIWebView! 
    	override func viewDidLoad() { 
    		super.viewDidLoad() 
    		webview = UIWebView() 
    		webview?.frame = CGRect(x: 0, y: 100, width: 100, height: 100) 
    		view.addSubview(webview!) 
    		webview1 = UIWebView() 
    		webview1.frame = CGRect(x: 0, y: 200, width: 50, height: 50) 
    		view.addSubview(webview1!) 
    		let path: String = Bundle.main.path(forResource: "1", ofType: "svg")! 
    		let url: NSURL = NSURL.fileURL(withPath: path) as NSURL 
    		let request: NSURLRequest = NSURLRequest(url: url as URL) 
    		webview?.loadRequest(request as URLRequest) 
    		webview1.loadRequest(request as URLRequest) 
    		} 
    } 
    
    
    2. swift使用SVGKit框架
    1. 我们按照正常的swift创建我们的项目,然后我们按照我们的GitHub的要求(Build the static library),这里我就不翻译了其实很简单的,创建了我们的静态库.a文件以及usr文件夹,这里注意一定要按照GitHub上的选择“Debug-universal”的文件夹里面的文件,否则会出错,选择iphone或者模拟器的文件都不能够完整的运作。
      新建链接文件OCHeader.h然后 我们到 build setting里面进行设置,注意路径,如果建在某个文件夹下面的,要把文件夹名称带上,xxx/xxx.h否则会报错。
      在这里插入图片描述

    2. 然后,我们在这个OCHeader.h设置我们要导入的一些类

    #ifndef svgtest_OCHeader_h
    #define svgtest_OCHeader_h
    #import "SVGKit.h"             //这就是我要添加的SVGKit的类,方便我的swift直接调用
    #import "SVGKImage.h"  //同上
    
    #endif
    
    
    1. 一次添加全局的swift都可以直接使用,
      然后我在我的ViewControler中写我们的代码把我先设置了一个button让其点击后加载我的svg格式的文件,svg格式的文件事先导入到了我的项目。
    import UIKit
    
    //cnblog里面没有swift 将就一下用了c的模板 代码里面对比了oc的例子指导代码,我们可以看到很多不同点。
    class ViewController: UIViewController {
        
        @IBOutlet var firstview: UIView!
        @IBAction func showsvgbuttonclic(sender: AnyObject) {
            var svgim:SVGKImage=SVGKImage(named: "Rsimplified.svg")
            //SVGKImage* newImage = [SVGKImage imageNamed:@"myImage.svg"];
          
            var svgimview=SVGKLayeredImageView(SVGKImage: svgim)
            //SVGKImageView* imageView = [[SVGKLayeredImageView alloc] initWithImage:newImage];
            
            firstview.addSubview(svgimview)
            //[self.view addSubView:  [[SVGKLayeredImageView alloc] initWithImage:newImage];
            NSLog("showsvgbuttonclick")
           
        }
    
    

    3. svg 集成方式

    1. 使用CocoaPods集成, 此方法支持模拟器运行.

    (1)在Podfile中加入代码

    pod 'SVGKit', :git => 'https://github.com/SVGKit/SVGKit.git', :branch => '2.x'
    #因为SVGKit本身集成了一个另外的一个第三方,所以也要集成一下.
    pod 'CocoaLumberjack'
    

    (2)命令行下cd到 Podfile对应的目录,运行

    pod install 
    
    1. 直接使用framework.(此方法会分离模拟器架构, 不支持模拟器运行.想了解分离模拟器架构的可以看下.)

    (1). 从github上下载之后,打开文件夹的SVGKit-iOS.然后xcode选项,Product->Scheme->Edit Scheme

    在这里插入图片描述
    (2).如上图根据情况选择.然后command+b进行编译.
    在这里插入图片描述
    (3). 编译成功后,打开Products,Show in Finder.
    在这里插入图片描述

    (4). 随后选择你编译后相应的的文件夹,将libSVGKit-iOS.2.0.0.a和user文件夹一起拖入项目.
    在这里插入图片描述

    (5) 由于SVGKit依赖第三方.CocoaLumberjack,有兴趣的小伙伴可以自行了解一下.
    在此,我们需要将CocoaLumberjack.framework处理后放到我们的项目中.
    在这里插入图片描述
    (6)同样是在SVGKit-iOS中,找到需要开发的那个CocoaLumberjack.framework.(此处有一个坑,就是SVGKit中的CocoaLumberjack.framework是包含模拟器的cpu架构的,会导你上传打包不成功.(可以统一使用pod集成,喜欢用真机测试的伙伴,也可以继续使用这种方法))
    (7)使用终端依次执行以下操作.将模拟器的cpu架构分离出来,保留并合并真机cpu架构.将处理后的CocoaLumberjack.framework拖入项目.最后添加一下需要的框架如下:
    CoreText
    CoreImage
    libxml2.dylib
    QuartzCore
    CoreGraphics
    UIKit

     #检测支持哪种框架
    lipo -info ./CocoaLumberjack.framework/CocoaLumberjack
    
    
    #分别将armv7和arm64分离出来
    mkdir armv7
    mkdir arm64
    lipo ./CocoaLumberjack.framework/CocoaLumberjack -thin arm64 -output ./arm64/CocoaLumberjack
    lipo ./CocoaLumberjack.framework/CocoaLumberjack -thin armv7 -output ./armv7/CocoaLumberjack
    
    lipo -info ./arm64/CocoaLumberjack
    lipo -info ./armv7/CocoaLumberjack
    
    
    #将分离出来的进行合并,并覆盖原文件
    lipo -create ./armv7/CocoaLumberjack ./arm64/CocoaLumberjack -output ./CocoaLumberjack.framework/CocoaLumberjack
    
    #删除之前分离的产物
    rm -rf ./arm64
    rm -rf ./armv7
    
    #再次进行检测支持的框架
    lipo -info ./CocoaLumberjack.framework/CocoaLumberjack
    
    
    
    
    
    
    
    
    

    二,使用UIWebView/WKWebView进行加载

    1. UIWebView加载svg图标
    NSString *svgPath = [[NSBundle mainBundle] pathForResource:@"svg名称" ofType:@"svg"];
    NSData *svgData = [NSData dataWithContentsOfFile:svgPath];
    NSString *reasourcePath = [[NSBundle mainBundle] resourcePath];
    NSURL *baseUrl = [[NSURL alloc] initFileURLWithPath:reasourcePath isDirectory:true];
    UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
    [webView loadData:svgData MIMEType:@"image/svg+xml" textEncodingName:@"UTF-8" baseURL:baseUrl];
    
    1. WKWebView加载svg图标
    NSString *svgPath = [[NSBundle mainBundle] pathForResource:@"svg名称" ofType:@"svg"];
    NSData *svgData = [NSData dataWithContentsOfFile:svgPath];
    NSString *reasourcePath = [[NSBundle mainBundle] resourcePath];
    NSURL *baseUrl = [[NSURL alloc] initFileURLWithPath:reasourcePath isDirectory:true];
    WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds];
    [webView loadData:svgData MIMEType:@"image/svg+xml" characterEncodingName:@"UTF-8" baseURL:baseUrl];
    

    Android 使用SVG图标

    新的改变

    我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:

    1. 全新的界面设计 ,将会带来全新的写作体验;
    2. 在创作中心设置你喜爱的代码高亮样式,Markdown 将代码片显示选择的高亮样式 进行展示;
    3. 增加了 图片拖拽 功能,你可以将本地的图片直接拖拽到编辑区域直接展示;
    4. 全新的 KaTeX数学公式 语法;
    5. 增加了支持甘特图的mermaid语法1 功能;
    6. 增加了 多屏幕编辑 Markdown文章功能;
    7. 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能,功能按钮位于编辑区域与预览区域中间;
    8. 增加了 检查列表 功能。

    功能快捷键

    撤销:Ctrl/Command + Z
    重做:Ctrl/Command + Y
    加粗:Ctrl/Command + B
    斜体:Ctrl/Command + I
    标题:Ctrl/Command + Shift + H
    无序列表:Ctrl/Command + Shift + U
    有序列表:Ctrl/Command + Shift + O
    检查列表:Ctrl/Command + Shift + C
    插入代码:Ctrl/Command + Shift + K
    插入链接:Ctrl/Command + Shift + L
    插入图片:Ctrl/Command + Shift + G

    合理的创建标题,有助于目录的生成

    直接输入1次#,并按下space后,将生成1级标题。
    输入2次#,并按下space后,将生成2级标题。
    以此类推,我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

    如何改变文本的样式

    强调文本 强调文本

    加粗文本 加粗文本

    标记文本

    删除文本

    引用文本

    H2O is是液体。

    210 运算结果是 1024.

    插入链接与图片

    链接: link.

    图片: Alt

    带尺寸的图片: Alt

    居中的图片: Alt

    居中并且带尺寸的图片: Alt

    当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。

    如何插入一段漂亮的代码片

    博客设置页面,选择一款你喜欢的代码片高亮样式,下面展示同样高亮的 代码片.

    // An highlighted block
    var foo = 'bar';
    

    生成一个适合你的列表

    • 项目
      • 项目
        • 项目
    1. 项目1
    2. 项目2
    3. 项目3
    • 计划任务
    • 完成任务

    创建一个表格

    一个简单的表格是这么创建的:

    项目 Value
    电脑 $1600
    手机 $12
    导管 $1

    设定内容居中、居左、居右

    使用:---------:居中
    使用:----------居左
    使用----------:居右

    第一列 第二列 第三列
    第一列文本居中 第二列文本居右 第三列文本居左

    SmartyPants

    SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如:

    TYPE ASCII HTML
    Single backticks 'Isn't this fun?' ‘Isn’t this fun?’
    Quotes "Isn't this fun?" “Isn’t this fun?”
    Dashes -- is en-dash, --- is em-dash – is en-dash, — is em-dash

    创建一个自定义列表

    Markdown
    Text-to-HTML conversion tool
    Authors
    John
    Luke

    如何创建一个注脚

    一个具有注脚的文本。2

    注释也是必不可少的

    Markdown将文本转换为 HTML

    KaTeX数学公式

    您可以使用渲染LaTeX数学表达式 KaTeX:

    Gamma公式展示 Γ(n)=(n1)!nN\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N 是通过欧拉积分

    Γ(z)=0tz1etdt&ThinSpace;. \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.

    你可以找到更多关于的信息 LaTeX 数学表达式here.

    新的甘特图功能,丰富你的文章

    Mon 06Mon 13Mon 20已完成 进行中 计划一 计划二 现有任务Adding GANTT diagram functionality to mermaid
    • 关于 甘特图 语法,参考 这儿,

    UML 图表

    可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图::

    张三李四王五你好!李四, 最近怎么样?你最近怎么样,王五?我很好,谢谢!我很好,谢谢!李四想了很长时间,文字太长了不适合放在一行.打量着王五...很好... 王五, 你怎么样?张三李四王五

    这将产生一个流程图。:

    链接
    长方形
    圆角长方形
    菱形
    • 关于 Mermaid 语法,参考 这儿,

    FLowchart流程图

    我们依旧会支持flowchart的流程图:

    Created with Raphaël 2.2.0开始我的操作确认?结束yesno
    • 关于 Flowchart流程图 语法,参考 这儿.

    导出与导入

    导出

    如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ,生成一个.md文件或者.html文件进行本地保存。

    导入

    如果你想加载一篇你写过的.md文件或者.html文件,在上方工具栏可以选择导入功能进行对应扩展名的文件导入,
    继续你的创作。


    1. mermaid语法说明 ↩︎

    2. 注脚的解释 ↩︎

    展开全文
  • SVG

    2020-10-20 20:15:49
    什么是SVG SVG 指可伸缩矢量图形 (Scalable Vector Graphics); SVG 用于定义用于网络的基于矢量的图形; SVG 使用 XML 格式定义图形; SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失; SVG 是万维网联盟...
  • SVG 画图

    千次阅读 2019-04-16 19:54:13
    把画的图片代码保存成svg文件,加载 http://www.bejson.com/convert/image_to_svg/https://www.aconvert.com/cn/image/png-to-svg/ 参考一 SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable ...
  • SVG—最简单的SVG动画

    万次阅读 2018-07-26 09:58:01
    SVG的几个最基础的命令 M:新建起点,参数x,y(M20, 30) L:连接直线,参数x,y(L30, 20) H:纵坐标不变,横向连线,参数x(H20) V:横坐标不变,纵向连线,参数y(V30) Q:二次贝塞尔曲线,参数...
  • SVG是什么?SVG有什么用途?

    千次阅读 2012-10-31 22:33:24
    一、SVG技术背景 随着网络上信息数据的大量涌现,如何正确显示和出版是有效传输、接收和利用它们的基础。图形、图像是信息数据可视化的主要方式。但现有的图形、图像格式存在着缺陷:非开放式,显示和印刷质量及...
  • SVG笔记

    2020-10-20 11:31:24
    SVG笔记SVG的基本结构闪动文字加入首屏、动画图片、事件触发构建第二屏动画 SVG的基本结构 <svg viewBox="0 0 1080 620" width="100%" height="620px" preserveAspectRatio="xMinYMin meet" xmlns=...
  • uiw-iconfont v1.2.4 已发布,uiw-iconfont 是从 uiw 组件库抽离出来的图标字体,基于 svg 图片生成的图标字体。更新内容新增 environment, eye, folder, man, user-add, user-delete, usergroup-delete, woman, 等8...
  • SVG代码如何转为SVG文件

    万次阅读 2019-04-19 11:31:00
    今天要做一张关于OPPO手机的海报,其中有一个地方需要OPPO的logo,于是想找一张高分辨率的OPPO logo的PNG图片,并且是最新版的oppo logo,发现网上都没有,于是根据以前敲代码的经验,想使用Photoshop开SVG文件,...
  • 很经典的SVG编辑器

    千次下载 热门讨论 2007-06-13 14:42:39
    SVGDeveloper是一款功能强大的SVG编辑软件,利用功能强大的绘制功能,你可以绘制诸如圆形、矩形、星形等基本形状,也可以绘制文本、图像和自由曲线等复杂图形。同时,SVGDeveloper还提供了其他一些高级功能使得你...
  • 中国省份地图 svg格式

    热门讨论 2012-11-07 13:16:38
    中国svg地图 只具体到省。 svg格式: SVG格式 SVG是一种用XML定义的语言,用来描述二维矢量及矢量/栅格图形。SVG提供了3种类型的图形对象:矢量图形(vectorgraphicshape例如:由直线和曲线组成的路径)、图象(image)...
  • SVG_SVG动画案例

    千次阅读 2018-05-22 09:25:35
    &nbsp; &nbsp; &nbsp; 尊重原创,欢迎转载,转载请注明: FROM&nbsp; GA_studio&nbsp; &nbsp;http://blog.csdn.net/tianjian4592 ...————————————————–...
  • SVG中国地图 SVG画的中国地图

    千次下载 热门讨论 2008-04-30 13:25:05
    SVG中国地图,矢量地图,用SVG Alayer手绘的。 本来是用来做天气预报的,用Ajax动态读取数据库然后通过SVG显示,大家最好把它加压的IIS根目录下,只有通过IP地址浏览时 才能看到动态效果,如果直接打开SVG文件 只能...
  • SVG交互性

    2018-09-13 15:13:07
    什么是SVG? 语法 SVG在网页中的使用方式 SVG交互 链接 事件 键按下 脚本 交互文本 结束语 什么是SVG? 是指可伸缩矢量图形 用来定义用于网络的基于矢量的图形 XML 格式定义图形  图像...
  • Xamarin版的C# SVG路径解析器

    千次阅读 2017-08-26 10:15:32
    SVG的Path路径进行解析,其中包括:主程序SvgPathParser.cs, 相关接口定义:ISourceFormatter.cs, 辅助类:FormatterRocks.cs, 从接口派生的CSharpCoreGraphicsFormatter.cs。
  • SVG Sprite技术介绍

    千次阅读 2015-12-11 10:26:05
    一、Sprite技术 ...二、SVG Sprite与symbol元素 目前,SVG Sprite最佳实践是使用symbol元素。symbol元素是什么呢?单纯翻译的话,是“符号”的意思。然,这个释义并不符合这里的场景。不知大家有没有
1 2 3 4 5 ... 20
收藏数 115,667
精华内容 46,266
关键字:

svg