svg
svg 和我们常见的 jpg / png 一样是图片的存储格式。但svg是矢量图,jpg / png 是位图。由于这些概念并不影响本文的主题(修改svg的内容/大小等操作),故概念介绍请见本文末尾。
修改svg
- 首先我们来看一下svg标签一般的样子:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#66ccff">
<path
d="M20.492,7.969,10.954.975A5,5,0,0,0,3,5.005V19a4.994,4.994,0,0,0,7.954,4.03l9.538-6.994a5,5,0,0,0,0-8.062Z"/>
</svg>
- 它的效果就是这样的:
- 主要属性和结构:
- path元素(图标内容):
- d:描绘图标的命令内容。可以想象浏览器有一支画笔,这个d元素就告诉浏览器的画笔要怎么动
- xmlns:命名空间,一般不需要修改。它只是看起来像一个http链接
- fill:图标的填充颜色,这里是 #66ccff ,即浅蓝色
- width / height:svg本身的宽 / 高
- viewBox:"x, y, width, height“,可以看到它有4个数值(在这里是 0 0 24 24)。
- “x,y”说明了图标的左上角位置,即图标从哪里开始出现
- ”width,height“说明了图标的宽和高
- 但要注意的是,图标会先描绘成 viewBox 设置的宽 / 高的大小,然后再拉伸成svg标签的 width / height 的大小。当调小 viewBox 的 width / height时,path描绘的图标相对viewBox的占比就会增大,然后被拉伸到svg的大小,同样的图标相对svg的大小占比也增大,因此就会表现为增大了图标的大小
- path元素(图标内容):

- 因此总结下来就是:
- 修改图标颜色:修改 fill 属性
- 修改图标大小:
- 增大:将 viewBox 的后两个数字调小,或将svg的 width 和 height 属性调大
- 缩小:将 viewBox 的后两个数字调大,或将svg的 width 和 height 属性调小
- 如果图像显示不全,则应考虑svg是否被div之类的标签限制了大小
- 修改图标内容:修改 path 元素的 d 属性
- 一般我们是去一些图标网站下载想要的svg图标,然后复制修改到想修改的地方,但有时会遇到一些问题:
- 原svg只有一个path标签,但想修改的svg包含多个path标签:
- 一般是一些不连续的图标会有多个path,比如这个:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20">
<path d="M18.5,0H5.5A5.506,5.506,0,0,0,0,5.5v13A5.506,5.506,0,0,0,5.5,24h13A5.506,5.506,0,0,0,24,18.5V5.5A5.506,5.506,0,0,0,18.5,0ZM21,18.5A2.5,2.5,0,0,1,18.5,21H5.5A2.5,2.5,0,0,1,3,18.5V5.5A2.5,2.5,0,0,1,5.5,3h13A2.5,2.5,0,0,1,21,5.5Z"/>
<path d="M15.449,12.815,13.5,14.731V6.5a1.5,1.5,0,0,0-3,0v8.231L8.551,12.815a1.5,1.5,0,1,0-2.1,2.14L9.55,18a3.524,3.524,0,0,0,4.9,0l3.1-3.048a1.5,1.5,0,1,0-2.1-2.14Z"/></svg>
- -
- 它由两部分组成:外围的 矩形 和里面的 箭头
- 效果:
- -
- 此时我们可以修改HTML源码或者用JS给原来的svg增加一个path标签,然后修改它的d属性。
- 或者是合并多个path为一个:
- 合并其实是很简单的,只需要把前一个path的d属性末尾的 ‘Z’(也可能是小写的 'z' )替换为英文的逗号 ',' ,然后把下一个path的d属性值原封不动复制到上一个path的d属性值的末尾即可
- 比如上面这个下载符号:

- -
- 最后就变成了这样:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20">
<path d="M18.5,0H5.5A5.506,5.506,0,0,0,0,5.5v13A5.506,5.506,0,0,0,5.5,24h13A5.506,5.506,0,0,0,24,18.5V5.5A5.506,5.506,0,0,0,18.5,0ZM21,18.5A2.5,2.5,0,0,1,18.5,21H5.5A2.5,2.5,0,0,1,3,18.5V5.5A2.5,2.5,0,0,1,5.5,3h13A2.5,2.5,0,0,1,21,5.5,
M15.449,12.815,13.5,14.731V6.5a1.5,1.5,0,0,0-3,0v8.231L8.551,12.815a1.5,1.5,0,1,0-2.1,2.14L9.55,18a3.524,3.524,0,0,0,4.9,0l3.1-3.048a1.5,1.5,0,1,0-2.1-2.14Z"/>
- -
- 注意:如果第一个path的d元素值末尾的 ‘z’ 没有替换掉,则可能会出现后一部分覆盖前一部分的问题。
- 我们仍然以上面的下载图标为例子:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20">
<path d="M18.5,0H5.5A5.506,5.506,0,0,0,0,5.5v13A5.506,5.506,0,0,0,5.5,24h13A5.506,5.506,0,0,0,24,18.5V5.5A5.506,5.506,0,0,0,18.5,0ZM21,18.5A2.5,2.5,0,0,1,18.5,21H5.5A2.5,2.5,0,0,1,3,18.5V5.5A2.5,2.5,0,0,1,5.5,3h13A2.5,2.5,0,0,1,21,5.5Z,
M15.449,12.815,13.5,14.731V6.5a1.5,1.5,0,0,0-3,0v8.231L8.551,12.815a1.5,1.5,0,1,0-2.1,2.14L9.55,18a3.524,3.524,0,0,0,4.9,0l3.1-3.048a1.5,1.5,0,1,0-2.1-2.14Z"/>
- -
- 效果:
- 可以看到只剩下外面的矩形了。