SVG 矢量图形体积小，边缘平滑，无惧缩放，是制作图标的上佳之选。
有时候，需要为不同状态的图标设置不同的颜色。比如默认是灰色，鼠标悬浮是蓝色，点击选中是另一种颜色等。
SVG 的用法灵活，可以内嵌到 HTML 文档，可以通过 <img> 当作图像引入，还可以作为背景图片使用。
不同的使用方法，有不同的颜色设置方法。
最简单的使用方法，是把 SVG 数据直接嵌入到网页中。在这种情况下，使用 CSS 可以直接选中路径和填充，颜色设置很方便。
举个例子，从 Lucide 图标库中选择任一图标，点击【Copy SVG】按钮，把 SVG 数据拷贝到剪贴板。
把数据直接粘贴到 HTML 文档中。currentColor 表示线条颜色继承父容器或自身的 color 颜色。
因为父容器颜色为红色，所以这个图标也是红色。
内嵌 SVG 还有一个独特优势：为一个图标设定多种颜色。比如，让苹果主体使用绿色，但果梗是红色。
通过 img 标签引入 SVG 文件，也是一种常用的方法。为了举例，下载一个 SVG 文件，点击【Download SVG】菜单即可。
此时的 SVG 默认呈现灰色。
如果你尝试修改父容器的颜色，发现 SVG 不受影响。通过 img 引入的 SVG，它是一个独立的沙盒，外界 CSS 样式影响不到它的内部数据。可以用滤镜强制转换颜色，但效果不易掌控，而且滤镜设置很复杂。对于 img 引入的 SVG，可以稍微改改简单的属性，比如透明度、饱和度等。它不适合用来设置颜色。使用 SVG 背景图是第三种使用方法。
此时的默认颜色也是灰色，同样无法随意设置图标颜色。但是，如果你把背景图像改成遮罩，也就是把 background-* 全局查找替换改成 mask-*，再指定一个背景色，你就能得到变色的 SVG 图标。
注意，遮罩会涉及跨域问题，不能使用 file:/// 本地文件协议，至少需要一个服务器才行。否则，图标不仅无法变色，还会消失，并触发如下错误：
最后，简单总结一下：直接内嵌至文档的 SVG 颜色随便改，最灵活，使用 CSS 就行。通过 img 和背景图引入的 SVG 图像，颜色不好改。使用 SVG 遮罩和背景色，可以调整颜色。遮罩语法和背景图类似，只不过要注意跨域问题。完。
Vue.Ge 全栈开发交流平台