简介
- 伸缩矢量图 (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 图形;
SVG 简介
简介
实例
使用 <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 图形;
root