SVG入门

优点

1. 和传统的图像比起来，尺寸更小，且可压缩性更强
2. 可伸缩
3. 图像可在任何的分辨率下被高质量地打印
4. 可在图像质量不下降的情况下被放大
5. 交互性更强

语法

svg之样式属性

• fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值；
• fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）；
• stroke-width 属性定义矩形边框的宽度；
• stroke 属性定义矩形边框的颜色；
• stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）
• opacity 属性用于定义了元素的透明值 (范围: 0 到 1)

svg标签

• 所有的SVG代码都是写在标签中，它是根元素。
• width和height 属性可设置此 SVG 文档的宽度和高度。如果不指定这两个属性，SVG 图像默认大小是300px（宽） x 150px（高）。
• viewBox属性：选取SVG图形的一部分，在当前SVG图形中展示这一部分；它的值有四个数字，分别是左上角的横坐标和纵坐标、SVG片段的宽度（默认为100％）和SVG片段的高度（默认为100％）。

circle标签-圆形

• cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
• r属性定义圆的半径

ellipse标签-椭圆

• cx,cy属性定义的椭圆中心的x,y坐标
• rx,ry属性定义的水平,垂直半径

rect标签-矩形

• x属性和y属性，指定了矩形左上角端点的横坐标和纵坐标；
• width属性和height属性指定了矩形的宽度和高度；

line标签-直线

• x1 属性在 x 轴定义线条的开始
• y1 属性在 y 轴定义线条的开始
• x2 属性在 x 轴定义线条的结束
• y2 属性在 y 轴定义线条的结束

polyline标签-曲线

• 用于创建任何只有直线的形状：
• points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔

polygon标签-多边形

• 用来创建含有不少于三个边的图形
• points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔

path标签-绘制路径

• d属性表示绘制顺序，它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标
• 比较常用的规则
• M：移动到（moveto） L：画直线到（lineto） Z：闭合路径
• 所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位

text标签-文本

• x属性和y属性，表示文本区块基线（baseline）起点的横坐标和纵坐标。文字的样式可以用class或style属性指定

use标签

• 用于复制一个形状
• href属性指定所要复制的节点，x属性和y属性是 左上角的坐标
• 还可以指定width和height坐标

g标签

• 用于多个形状组成一个组（group），方便复用

image标签

• 用于插入图片文件
• xlink:href属性表示图像的来源

animate标签

• 用于产生动画效果；
• attributeName：发生动画效果的属性名；
• from：单次动画的初始值；；
• to：单次动画的结束值；；
• dur：单次动画的持续时间；；
• repeatCount：动画的循环模式；
• 如果想要让该元素的更多属性具有动画效果，只要添加更多的 元素到该元素内部即可。

SVG文件的使用

• SVG文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作

• SVG 代码也可以写在一个独立文件中，然后用img、object、embed、iframe等标签插入网页

• CSS 也可以使用 SVG 文件

.logo {
  background: url(icon.svg);
}

• SVG 文件还可以转为 BASE64 编码，然后作为 Data URI 写入网页