可缩放矢量图形(Scalable Vector Graphics)是W3C推出的基于XML的二维矢量图形标准。SVG可以提供高质量的矢量图形渲染，同时由于支持JavaScript和文档对象模型，SVG图形通常具有强大的交互能力。另一方面，SVG作为W3C所推荐的基于XML的开放标准，能够与其他网络技术进行无缝集成。
SVG Coordinate System
SVG的坐标系统是一个以左上角(0,0)为原点，向右为横行坐标轴，向下为纵向坐标轴的二维平面画布。SVG的图形有4个主要元素（x,y,width,height），分别是：x起点的与原点的横向距离，y起点与原点的纵向距离，width图形的宽度，height图形的高度。
画布
注意：所有的 SVG 代码都要写在 <svg> 标签内。
<!-- 画出边框的主要目的是为了观察画布的大小 -->
<svg style="border:1px solid red;">
</svg>
SVG画布
画圆
<svg style="border:1px solid red;">
<circle cx="25" cy="25" r="20"/> <!-- Add circle at 25, 25 with radius=20 -->
</svg>
画圆
SVG各种图形
SVG提供了<circle>、<ellipse>、<line>、< polyline>、<rect>、<polygon>等6种基本的图形元素和<path>路径元素。可以对各种类型的几何图元进行描述。
<svg width="200" height="200" style="border:1px solid red;">
<circle cx="25" cy="25" r="20" class="ball"/>
<ellipse cx="105" cy="25" rx="55" ry="20" class="ball"/>
<rect x="25" y="55" width="40" height="80" class="pad"/>
<text x="100" y="100">Magic!</text>
<path d="M100 100 L50 200 L150 200 Z"/>
</svg>
SVG各种图形
填充颜色
<svg style="border:1px solid red;">
<circle cx="25" cy="25" r="20"
fill="blue"/> <!-- fill with circle with blue -->
</svg>
填充颜色
图形边框
<svg style="border:1px solid red;">
<circle cx="25" cy="25" r="20"
fill="blue"
stroke="gray" stroke-width="5"/> <!-- Add 5px gray stroke -->
</svg>
图形边框
