可缩放矢量图形(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>

图形边框