svg
SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 使用 XML 格式定义图像。
什么是矢量图
- 矢量图，也称为面向对象的图像或绘图图像
- 在数学上定义为一系列由线连接的点
- 矢量文件中的图形元素称为对象，每个对象都是自成一体的实例
- 它具有颜色，形状，轮廓，大小和屏幕位置等属性
矢量图是根据几何特性来绘制图形，矢量可以是一个点或一条线，矢量图只能靠软件生成，文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。它的特点是放大后图像不会失真，和分辨率无关，适用于图形设计、文字设计和一些标志设计、版式设计等
SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。
fill 属性设置形状内的颜色。我们把填充颜色设置为红色。
使用介绍
- 可以嵌套在 <embed>、<object> 或者 <iframe>
- 当然也可以直接<svg></svg>使用
- 把svg的文件用a标签引入<a href="circle1.svg">View SVG file</a>
svg的语法糖
svg在定义的时候已经初始化了很多简单的图形
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>
其实我们使用svg大部分还是使用path,来定义一些复杂的图案
path
M = moveto 起始位置
L = lineto 结束位置
H = horizontal lineto 水平
V = vertical lineto 垂直
C = curveto 曲线
S = smooth curveto 平滑的曲线
Q = quadratic Bézier curve //没用过
T = smooth quadratic Bézier curveto //没用过
A = elliptical Arc 椭圆弧形
Z = closepath 关闭路径
我们如果做复杂的图形，用path很麻烦，我们要做各种的计算，所以官网给我们的建议是，建议我们使用编辑器
svg还可以做很多的效果，比如说渐变 模糊 阴影 等等在这里就不一一介绍了，这篇文章只是科普性质的具体的还是需要去官网或者中文教程上去看
小技巧
1.修改svg大小
在svg标签上添加width和height
默认单位是px
<svg width="22" height="18"></svg>
2.修改图标的背景颜色
需要在path上添加fill表示填充色
<svg>
<path fill="#00c585">
</path>
</svg>
3.控制svg旋转
在svg标签上添加transform动画属性
<svg transform="rotate(45)"></svg>
网友评论