最后更新于
这有帮助吗？
最后更新于
这有帮助吗？
先讲下缘由 某天找设计师 要图标的时候， 发来一个 codeDesign 的链接 咱就去下载， 下载下来后 运用内部的 svg 转换工具 转成 iconfont 没想到， 在页面上的效果跟 svg 的样式不一致，咱也不敢直接怀疑设计师给的有问题。只能自己排查。后面实在是找不到问题，只能让设计师重新发一遍，没想到重发的可以了，遂对比下前后。
先了解下什么是 svg
svg 在变大变小的情况下不会失真（出现锯齿或者看到像素点），也可以像 GIF 一样动起来。
inline svg ， 直接把 svg 写入 HTML 中
不需要在单独去请求，修改图标的形状也方便。
img object embed 标签直接引用 svg
SVG Sprite
这里的 Sprite 技术，类似于 CSS 中的 Sprite 技术。图标图形整合在一起，实际呈现的时候准确显示特定图标。其实基础的 SVG Sprite 也只是将原来的位图改成了 SVG 而已，控制 SVG 大小、颜色需要重新合并 SVG 文件。
4.使用 SVG 中的 symbol，use 元素来制作 SVG Sprite
SVG Symbols 的使用，本质上是对 Sprite 的进一步优化，通过元素来对单个 svg 元素进行分组，使用元素引用并进行渲染。这种方法的解决了上述三种方式带来的弊端，少量的 http 请求，图标能被缓存方便复用，每个 SVG 图标可以更改大小颜色，整合、使用以及管理起来非常简单。
①SVG Symbols 作为 body 的第一个元素插入在 HTML 中使用：
相比把一个.svg 文件嵌入到一个标签中，反过来把一个位图图像嵌入到 SVG 代码中也是可以的。
preserveAspectRatio 属性强制统一缩放比来保持图形的宽高比。
rect 矩形
用于绘制矩形、圆角矩形，含有 6 个基本属性用于控制矩形的形状以及坐标
x：矩形左上角 x 位置, 默认值为 0
y：矩形左上角 y 位置, 默认值为 0
width：矩形的宽度, 不能为负值否则报错, 0 值不绘制
height：矩形的高度, 不能为负值否则报错, 0 值不绘制
rx：圆角 x 方向半径, 不能为负值否则报错
ry：圆角 y 方向半径, 不能为负值否则报错
rx 和 ry 都没有设置, 则 rx = 0 ry = 0
rx 和 ry 有一个值为 0, 则相当于 rx = 0 ry = 0，圆角无效
rx 和 ry 有一个被设置, 则全部取这个被设置的值
rx 的最大值为 width 的一半, ry 的最大值为 height 的一半
circle 圆形
SVG 中 circle 元素用于绘制圆形，含有 3 个基本属性用于控制圆形的坐标以及半径，具体如下：
r：半径
cx：圆心 x 位置, 默认为 0
cy：圆心 y 位置, 默认为 0
3.ellipse 椭圆
SVG 中 ellipse 元素用于绘制椭圆，是 circle 元素更通用的形式，含有 4 个基本属性用于控制椭圆的形状以及坐标，具体如下：
rx：椭圆 x 半径
ry：椭圆 y 半径
cx：圆心 x 位置, 默认为 0
cy：圆心 y 位置, 默认为 0
line 直线
line 绘制直线。它取两个点的位置作为属性，指定这条线的起点和终点位置。
x1：起点的 x 位置
y1：起点的 y 位置
x2：终点的 x 位置
y2：终点的 y 位置
polyline 折线 polyline 是一组连接在一起的直线。因为它可以有很多的点，折线的的所有点位置都放在一个 points 属性中：
points 点集数列，每个数字用空白、逗号、终止命令符或者换行符分隔开，每个点必须包含 2 个数字，一个是 x 坐标，一个是 y 坐标 如 0 0, 1 1, 2 2
polygon 多边形 polygon 和折线很像，它们都是由连接一组点集的直线构成。不同的是，polygon 的路径在最后一个点处自动回到第一个点。需要注意的是，矩形也是一种多边形，如果需要更多灵活性的话，你也可以用多边形创建一个矩形。
points 点集数列，每个数字用空白、逗号、终止命令符或者换行符分隔开，每个点必须包含 2 个数字，一个是 x 坐标，一个是 y 坐标 如 0 0, 1 1, 2 2， 路径绘制完闭合图形”
SVG 的路径功能非常强大，它不仅能创建基本形状，还能创建更多复杂的形状。路径是由一些命令来控制的，每一个命令对应一个字母，并且区分大小写，大写主要表示绝对定位，小写表示相对定位。 通过属性 d 来定义路径， d 是一系列命令的集合，主要有以下几个命令著作权归作者所有。
通常大部分形状，都可以通过指令 M(m)、L(l)、H(h)、V(v)、A(a)来实现，注意特别要区分大小写，相对与绝对坐标情况，转换时推荐使用相对路径可减少代码量，例如：
svg 事件没有触发 直接在 svg 组件上绑定 onClick 事件，这个事件在有的浏览器上面并不会触发，我们应该在外层去添加事件，外层套个 i 标签或者 button 标签
