SVG

可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是一种基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG由W3C制定，是一个开放标准。

SVG基于VML，这意味着SVG DOM中的每个元素都是可操作的（为元素添加JavaScript事件），在SVG中，被绘制的图形都可以当成一个可操作的对象，如果该对象的属性发生变化，可以通过事件机制，让浏览器实时反映该属性的变化即重绘图形。SVG提供了一系列的图形元素、动画以及事件机制，适用于静态图片的展示，比如google地图。

目前主要的使用场景有：

• Logo图
• 矢量图
• UI组件
• 信息化图标
• 图标（字体图标、loading图标等）

画一个正方形：

<svg  xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" height="100" width="100"
          style="stroke:#ff0000; fill: #0000ff"/>
</svg>

效果图：

• 矩形：rect

<rect x="10" y="10" fill="#eee" width="100" height="100"/>

• 圆：circle

<circle cx="10" cy="10" r="10" fill="red"/>

• 椭圆：ellipse

<ellipse cx="50" cy="60" fill="#eee" rx="20" ry="30"/>

• 直线：line

<line x1="10" y1="10" x2="20" y2="20" fill="#eee" stroke-width="2" stroke="black"/>

• 折线：polyline

<polyline stroke="black" fill="#eee" points="10, 80 40, 50 30, 60 100, 10"/>

• 多边形：polygon

<polygon fill="#eee" points="60,20 100,40 100,80 60,100 20,80 20,40"/>

• 路径：path

<path fill="#eee" d="M37,17v15H14V17H37z M50,0H0v50h50V0z"/>

• 动画：animate

<animate id="animate" attributeType="XML" attributeName="d" from="-100" to="120" dur="0.3s" repeatCount="indefinite" fill="freeze" values="...."/>