简介

• 伸缩矢量图 (Scalable Vector Graphics)，简称 SVG，用于生成矢量图形；
• SVG 在放大或改变尺寸时图形质量不会有损失，在任何分辨率下被高质量地打印；
• SVG 是 W3C 标准,使用 XML 作为数据格式，和 XSL 和 DOM 相兼容；
• SVG 比 JPEG 和 GIF尺寸更小，可压缩性更强；

实例

使用 <svg> 标签创建一个矩形；

<svg width="200" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="200" height="100" rx=10 ry=10 style="fill:#4faa2a"/>
</svg>

效果：

SVG 查看

主流浏览器都支持 SVG 查看，IE8 和早期版本需要安装插件（Adobe SVG 浏览器）。

坐标

SVG 使用的坐标系统和 Canvas 用的差不多：以页面的左上角为(0,0)坐标点，x 轴正方向是向右，y 轴正方向是向下。
SVG 因为是可以缩放的，只需给出数字的相对大小用户单位，不标明具体单位（pt,px,cm等)。

SVG 结构元素

<g> 元素
<g> 元素作用是分组，能把多个元素组合在一起，<g> 标记实施的样式和渲染会作用到这个分组内的所有元素上。

<symbol> 元素
<symbol> 元素定义一个图像模板，可以使用 <use> 标签实例化并显示，然后在 SVG 文档中反复使用；

<use> 元素
<use> 元素可以在 SVG 图像中重用预定义的 SVG 图形;