SVG 是一种可以绘制矢量图片的图形技术，它基于 XML 标记语言。目前主流浏览器都支持直接显示这种格式的图形资源，出于项目需要，我目前正在学习这门图形技术的使用，本文是即是一篇学习总结记录，同时也是一篇面向 SVG 初学者的快速入门教程。
SVG 是什么
上面有过简单的介绍，SVG 是一种使用 XML 标记语言的图形技术。通过预定义的一些 XML 标签，可以绘制各种形状的矢量图形。矢量图形意味着图片不论是放大还是缩小，在体积不变的情况下，图片质量不会有任何损失。
除了可以绘制各种形状，SVG 还支持渐变，旋转，滤镜以及动画效果。加上它使用的是 XML 标签，所以还可以通过 CSS 来定义样式，以及用 JavaScript 来实现一些交互功能。
SVG 的用途
利用 SVG 缩放而不损失图片显示质量的特性，可以用来制作应用程序的图标。
而针对 XML 标签语言特性，以及与 CSS 和 JavaScript 的互动能力，可以用来制作一些数据分析以及统计图表类的展示功能。比如 D3.js，它就是一个基于 SVG 的图表绘制工具。关于它的使用可以参阅下面的专栏。
画直线
先来看个最基础的例子：用 SVG 绘制一条直线。
实现上面效果的代码如下：
<svg>
<line x1="10" y1="10" x2="110" y2="10" stroke="blue" stroke-width="5"/>
</svg><svg> 是 SVG 图形的根元素，这里可以把它当作是画布。<line> 是绘制直线的标签，x1 和 y1 是标签属性，它们定义了直线的起点，x2 和 y2 定义了直线的终点。它们的坐标相对于 <svg> 标签的左上角。stroke 用来设置线条颜色，stroke-width 设置线条宽度。
画矩形
<svg>
<rect x="10" y="10"
width="110" height="50"
fill="transparent"
stroke="blue" stroke-width="5"/>
</svg>同样的，<svg> 是必不可少的根节点。<rect> 是矩形绘制标签。通过 x 和 y 属性定义了矩形绘制的起点，然后通过 width 和 height 设置了矩形的大小。fill 用来设置矩形的填充颜色，这里用的 transparent，表示设置为透明。stroke 和上面直线的作用一致，如果没记住可以翻上去看看。
画圆形
<svg>
<circle cx="60" cy="60" r="50" fill="transparent" stroke="blue" stroke-width="5"/>
</svg><circle> 是圆形绘制的标签。圆形绘制主要靠两个特征：一是中心点，二是半径。cx 和 cy 属性定义了圆的中心点位置，而 r 则是用来设置圆的半径。
画椭圆
<svg>
<ellipse cx="60" cy="60" rx="50" ry="25" fill="transparent" stroke="blue" stroke-width="5"/>
</svg>ellipse 是椭圆绘制标签。椭圆跟圆的绘制有点区别，它是半径属性拆分成了两个。所以除了有和圆形一样 cx 和 cy 与属性外，半径属性变成了 rx 和 ry。rx 用来定义横向的半径，ry 用来定义纵向的半径。
画折线
<svg>
<polyline points="10 40, 60 10, 60 60, 10 90" fill="transparent" stroke="blue" stroke-width="5"/>
</svg><polyline> 是折线绘制标签，它主要通过 points 来定义要绘制的任意点。这个属性使用空格来分割 x 和 y 的取值，通过逗号区分定义的位置点。点的定义顺序为顺时针方向，从九点钟位置开始。
画多边形
<svg>
<polygon points="10 40, 60 10, 60 60, 10 90" fill="transparent" stroke="blue" stroke-width="5"/>
</svg><polygon> 是多边形绘制标签，它和折线绘制标签的用法相似，同样是以 points 来定义要绘制的任意点。区别在于多边形绘制标签会自动闭合结束点和起始点。通过观察上面两个绘制标签的示例代码和演示效果可以很明显观察到这个差异。
未完待续
SVG 除了以上基础图形绘制，还提供了路径、渐变、遮罩等更强大的能力。限于个人精力和篇幅，这些更强大的功能后面再以单独的文章来介绍。等不了的朋友可以通过 MDN 提供的 SVG 教程 来学习，比我介绍的要详细。