SVG

概述：

    SVG 基于 XML 语法的图像格式，它可以任意改变其大小也不会变形，是一种和图像分辨率无关的可缩放矢量图。

优点：

    1．任意放缩：用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。

    2．文本独立：SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。

    3．较小文件：总体来讲，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下载也很快。

　4．超强显示效果：SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨力和打印分辨力。

　5．超级颜色控制：SVG图像提供一个1 600万种颜色的调色板，支持ICC颜色描述文件标准、RGB、线X填充、渐变和蒙版。

　6．交互性和智能化：SVG面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式Flash竞争的问题，另一个问题就是SVG的本地运行环境下的厂家支持程度。

注：GIF、JPEG，png等都是位图，改变其尺寸大小图像会变形或会出现马赛克模糊等情况

用法：

SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作。

上面是 SVG 代码直接插入网页的例子。效果图如下：

SVG 代码也可以写在一个独立文件中，然后用<img>、<object>、<embed>、<iframe>等标签插入网页。

效果图如下：

实际上，除了img标签是引入该svg的路径来加载图片的，其他的是三个标签都是通过将svg标签的所有属性值放在dom层里加载出来；

CSS 也可以使用 SVG 文件

注意：svg图片如果作为背景图放在css里面写的话，需要固定宽高，且加上background-size属性，来规定背景图像的尺寸;

语法：

1、<svg>标签：SVG 代码都放在顶层标签<svg>之中；

属性：width（宽度）、height（高度）；可用具体像素单位和百分比；不指定则为默认值width=300px；height=150px;  viewBox = “x，y，width，height” 分别是<svg>画布上左上角的横坐标和纵坐标、视口的宽度和高度

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

左图是加了viewBox属性的，右图是去掉viewBox属性的；存在的可视区域都是100*100的，而实际上此时circle的大小是不一样的，分别是200*200，100*100

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

2、<circle>标签：代表圆形 

    <circle  cx="50"  cy="50"  r="50" class="red"/>

属性：cx：横坐标，cy：纵坐标，r：半径，单位为像素。坐标都是相对于<svg>画布的左上角原点。                                 class属性用来指定对应的 CSS 类。且svg的css与网页元素不同。

如：fill：填充色；stroke：描边色；stroke-width：边框宽度

3、 <line>标签：用来绘制直线 

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

属性：x1：线段起点的横坐标；y1：线段起点的纵坐标；x2：线段终点的横坐标；y2：线段终点的纵坐标；style：线段的样式。

4、<polyline>标签：用于绘制一根折线     

    <polyline   points="3,3 30,28 3,53"   fill="none"  stroke="black"/>

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

5、 <rect>标签：用于绘制矩形

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

属性：x：矩形左上角端点的横坐标；y：矩形左上角端点的纵坐标；width：矩形的宽度；height：矩形的高度

6、<ellipse>标签：用于绘制椭圆

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

属性：cx：椭圆中心的横坐标；cy：椭圆中心的纵坐标；rx：椭圆横向轴的半径；ry：椭圆纵向轴的半径

7 、<polygon>标签：用于绘制多边形

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

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

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

    <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>

属性：d：表示绘制顺序，它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标；

            M：移动到（moveto）；L：画直线到（lineto）；Z：闭合路径

9、<text>标签：用于绘制文本

    <text    x="50"    y="25"   class="txt">Hello World</text>

属性：x：文本区块基线（baseline）起点的横坐标；y：文本区块基线（baseline）起点的纵坐标。文字的样式可以用class或style属性指定。

10、 <use>标签：用于复制一个形状

    <circle    id="myCircle"    cx="5"    cy="5"    r="4"/>

    <use    href="#myCircle"    x="10"    y="0"    fill="blue"/>

属性：href：指定所要复制的节点，x：<use>左上角的横坐标；y：<use>左上角的纵坐标；width：<use>的宽度；height：<use>的高度；

1 1、<g>标签：用于将多个形状组成一个组（group），方便复用。

<g    id="myCircle">    <textx="25"y="20">圆形</text>    <circle    cx="50"    cy="50"    r="20"/>    </g>

属性：<g>里面可以套别的svg的专有标签</g>

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

<defs>    <text    x="25"    y="20">圆形</text>    </defs>

    属性：想写啥写啥，但是内容可以被use标签复制引用；相当于被visblity：hidden了，但是仍然在dom结构中

13、<image>标签：用于插入图片文件。

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

属性：xlink:href：图片的来源路径；width：图片的宽度；hieght：图片的高度

14、<pattern>标签：用于自定义一个形状，该形状可以被引用来平铺一个区域。

<pattern    id="dots"    x="0"    y="0"    width="100"    height="100"    patternUnits="userSpaceOnUse">    <circlefill="#bee9e8"cx="50"cy="50"r="35"/>  </pattern>

<rect    x="0"    y="0"    width="100%"    height="100%"    fill="url(#dots)"/>

属性：x：横坐标；y：纵坐标；width：<pattern>的宽度；hieght：<pattern>的高度。patternUnits="userSpaceOnUse"表示<pattern>的宽度和长度是实际的像素值。通过在别的标签中(rect)用fill="url(#pattern)"属性；来填充满这个标签(矩形)的内容区域；

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

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

属性：attributeType：指定attributeName属性的属性，默认为"auto"，attributeName：发生动画效果的属性名；from：单次动画的初始值；to：单次动画的结束值；dur：单次动画的持续时间；repeatCount：动画的循环模式。

注：可以在多个属性上面定义动画

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

<animate    TransformattributeName="transform"    type="rotate"    begin="0s"    dur="10s"    from="0 200 200"    to="360 400 400"    repeatCount="indefinite"/>

属性：type：<animateTransform>的效果为旋转（rotate），from：旋转开始时的角度值、旋转中心的横坐标、纵坐标，围绕（200、纵200）旋转；to：旋转结束时的角度值、旋转中心的横坐标、纵坐标，围绕(400, 400)旋转。

SVG 图像入门教程：http://www.ruanyifeng.com/blog/2018/08/svg.html