svg
SVG是一种XML应用，用来表示矢量图形。所有的图形有关信息被存储为纯文本，具有XML的开放性、可移植性和可交互性。当前稳定的XML和SVG版本都为1.1。
在HTML中使用的方式
作为内容
SVG 文件可通过以下标签嵌入 HTML 文档：<embed>、<object> 或者 <iframe>。建议使用<iframe>
<iframe src="https://svgsilh.com/svg_v2/639149.svg" frameborder="0" width="200px"></iframe>作为图片
<img src="https://svgsilh.com/svg_v2/639149.svg" alt="" width="200px">作为元素
推荐直接使用直接嵌入到HTML页面中。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" >
<rect width="200" height="200" fill="#ccc" />
</svg>基本概念
坐标系
SVG使用的坐标系统或者说网格系统，这种坐标系统是：以页面的左上角为(0,0)坐标点，坐标以像素为单位，x轴正方向是向右，y轴正方向是向下。在HTML文档中，元素都是用这种方式定位的。
长度单位
基本上，在 SVG 文档中的1个像素对应输出设备（比如显示屏）上的1个像素。SVG也可以定义绝对大小，同时SVG也能使用相对大小，只需给出数字，不标明单位，输出时就会采用用户的单位。
用户坐标系统
用户单位和屏幕单位的映射关系被称为用户坐标系统。除了缩放之外，坐标系统还可以旋转、倾斜、翻转。
<svg width="200" height="200" viewBox="0 0 50 50">
<rect x="10" y="5" width="20" height="20" fill="#cd0000"/>
</svg>形状
线 <line>
- x1 属性在 x 轴定义线条的开始
- y1 属性在 y 轴定义线条的开始
- x2 属性在 x 轴定义线条的结束
- y2 属性在 y 轴定义线条的结束
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="0" y1="200" x2="200" y2="0"
style="stroke:#ccc;stroke-width:1"/>
</svg>矩形 <rect>
- width 和 height 属性可定义矩形的高度和宽度
- x 属性定义矩形的左侧位置
- y 属性定义矩形的顶端位置
- rx 和 ry 属性可使矩形产生圆角。
- style 属性用来定义 CSS 属性
- CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
- CSS 的 stroke-width 属性定义矩形边框的宽度
- CSS 的 stroke 属性定义矩形边框的颜色
- CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
- CSS 的 stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）
- CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
<rect x="50" y="50" width="100" height="100" style="fill:#ccc;stroke:black;stroke-width:1;opacity:0.5" />
</svg>圆形 <circle>
- cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
- r属性定义圆的半径
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="1" fill="#ccc"/>
</svg>椭圆 <ellipse>
- CX属性定义的椭圆中心的x坐标
- CY属性定义的椭圆中心的y坐标
- RX属性定义的水平半径
- RY属性定义的垂直半径
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px">
<ellipse cx="50" cy="50" rx="30" ry="20" style="fill:red"/>
</svg>折线 <polyline>
使用points指定顶点。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
style="fill:none;stroke:black;stroke-width:1" />
</svg>多边形 <polygon>
points 用来指定多边形顶点坐标
<svg height="200" width="200">
<polygon points="100,10 200,190 100,200" style="fill:#ccc;stroke:black;stroke-width:1"/>
</svg>路径 <path>
path可能是SVG中最常见的形状。你可以用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等曲线。
path元素的形状是通过属性d定义的，属性d的值是一个“命令+参数”的序列
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Bézier curve
- T = smooth quadratic Bézier curveto
- A = elliptical Arc
- Z = closepath
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450">
<path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
</svg>文本
- dx,dy x和y方向的偏移。
- x,y 对tspan进行绝对定位。
- rotate 旋转字符，可以同时设置多个值，这些值会依次作用在tspan包裹的字母上。
- baseline-shift 与dy属性设置上下标相比，这个属性更方便，当为super时，会上标。sub时为下标。仅仅在所在的tspan内有效。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="10" y="20" style="fill:black;">多行文字:
<tspan x="10" y="45">第一行</tspan>
<tspan x="10" y="70">第二行</tspan>
</text>
</svg>如果要使得文本沿着某条路径排列，则需要使用textPath元素。需要将文本放在textPath元素内部，然后使用textPath元素的xlink:href属性引用一个定义好的path元素。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
</defs>
<text x="10" y="100" style="fill:black;">
<textPath xlink:href="#path1">I love SVG I love SVG</textPath>
</text>
</svg>填充和边框
fill属性设置对象内部的颜色，stroke属性设置绘制对象的线条的颜色。你可以使用在HTML中的CSS颜色命名方案定义它们的颜色，比如说颜色名（像red这种）、rgb值（像rgb(255,0,0)这种）、十六进制值、rgba值，等等。
组合
元素g是用来组合对象的容器。添加到g元素上的变换会应用到其所有的子元素上。添加到g元素的属性会被其所有的子元素继承。此外，g元素也可以用来定义复杂的对象，之后可以通过<use>元素来引用它们。
进阶
除了上述基础知识之外，还应该随着需求去深入了解滤镜、蒙版、动画、接口等等内容。