SVG 简介

简介

  • 伸缩矢量图 (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 图形;

留下评论

电子邮件地址不会被公开。 必填项已用*标注