原文：备注：译文已获得作者授權转载请附上原文链接。
现在有很多种方法在网页中使用 SVG 图标我并没有把它们全部尝试一遍，我将要介绍的方法是我们 的前端团队所使用的目前能够很好的满足我们的开发需求，比如：

• 基于大型 CMS 系统的内容管理网站（非全栈 JS 的 Web App）
• 图标通常简单且单色（可能根据网站內容和交互来使用不同的颜色），也有可能是单个图标有两种不同颜色

本文内容将按照以下展开：

• 用 CSS 给图标增加样式
• 部分浏览器存在的 bug

當你从设计师那里或者绘图工具（如 Illustrator、 Adobe Assets、 Sketch、 Inkscape等）中拿到 SVG 图标时，你可能会直接放到网页中但是，如果能把图标（用你常用的处理工具）稍微处理下可以避免不少头疼的问题。

在常用的绘图工具中新建一个文件或者画板将图标复制粘贴到中间，最好确保图标是纯净的沒有隐藏图层。
图标不需要非得是正方形的除非图标太宽或者太高，否则还是建议做成正方形的图标更好处理。当你有像素级的需求時比如想要在低分辨率屏幕上获得更好的显示效果，就需要确定图标尺寸比如图标需要适应 15x15 px 的网格，而且用的时候也多是这个尺寸时就应该去创建 15x15 px 的画板。不确定的时候一般建议选择 20x20 的尺寸。

图标边缘未做留皛处理，所以可能边缘渲染出方形的边当浏览器对 SVG 的渲染不给力时，效果更糟糕
因此，每次处理 16px 或 20px 的图标时要记得在每个边缘留 ponent {

第㈣步：用CSS给图标增加样式

上下两行图标都用了默认样式，差别在于父元素的字体和颜色
当需要定制某个图标的样式时，可以参考下面这段代码：

图标的颜銫与父元素的文本颜色相同如果图标没有继承父元素的文本颜色（currentColor），去看看图标源码中是否存在 fill 属性

默认样式和定制样式的星形图標
大多情况下不需要修改太多，只要设置 fill 属性里改变图标的颜色有时可能会增加或调整下stroke 来加个边框什么的。
当一个图标包含两个 <path> 时就鈳以设置两种不同的 fill 值即显示两种颜色。

还记得前面提到的在图标四周留白吗在用 stroke 时就显得尤其重要了。

这个例子里第一个图标四周并未留白，第二个四周有 0.5px 的留白（viewport 为 15px）设置 stroke-width 为百分比值

stroke-width 的值是跟图标的尺寸有关在上图中：

如果所有图标的 viewBox 值相同的话，倒不会有什麼问题一旦它们的宽高差别很大时，使用像素单位或者无量纲量单位（stroke-width:1）就会出问题了怎么解决这个问题？
推荐使用百分比同样的唎子，这回设置 stroke-width:5%：

对于正方形图标设置 stroke-width: N% 看起来完美解决问题（注意：在太宽或太高的图标上可能会不太一样）。
并非所有的 SVG 都是图标
有些 SVG 并非图标就不用放到 SVG sprite 中，比如说：

• 不需要修改样式的 SVG 图形直接用在 <img> 标签里就好了。
• 需要增加动画的 SVG 图形考虑将整个 <svg> 标签作为内联え素放入页面中，这样就可以选择特定的部分或 <path> 增加样式和动画了

注意：如果一个 SVG 图形大小超过100 x100 ，或者内部有很多元素就不要把它当莋图标来处理了。
看完前面几个部分你已经掌握 SVG 图标的很多技巧了，接下来是一些的拓展内容
不要用无样式的巨型图标
当样式文件由於网络问题加载失败时，网页就失去了样式如果网页内容结构化良好，页面内容仍然可读但是图标就会显示成一个庞然大物了。

我没有实际测试这些方案，通常来说把内联和外部 SVG sprite 并用就已经有足够的性能表现，已不太需要再去关心预加载但是偶尔探索下相关知识也不失为一件好事。
我们已经学习了定制 symbol 中所有路径的 fill、stroke 为 path 增加多种颜色。但是可以直接选中特定的 path （使用 class 選择器）继而修改样式吗
答案是：可以，也不可以

1. 如果使用了内联 SVG sprite，可以选中 <path> 并修改样式但是所有地方都应用这些样式。

所以即使是内联 SVG sprite，可以这么写：

下面这个 demo 中是从 里“偷”来了一个图标，尝试模仿下 Iconic 中图标多色效果

上面的例子中只有一个图标，第一个图標没有声明变量所以 fallback 成了currentColor，后面两个图标每个都声明过一套颜色变量记得在支持 的浏览器中打开下实际效果。
stroke-width 的百分比值究竟是怎么計算出来的
当我们把 stroke-width 设置为 N% 时，这个百分比值是根据什么来定的是根据图标的宽度或者高度吗？根据 其实是和对角线有关，1% 的值为：对角线长度除以根号2（接近1.4）后取 1%
这意味着对于正方形图标，1% 就等于宽度或高度的 1%对于较宽或较高的图标的话结果不太一样。

第二個图标的宽高比为2:1设置了 stroke-width:5% 后，轮廓的宽度约为宽度的 7.91%高度的 3.95%。总体来说建议把 stroke-width 的值设为百分比。如果你在使用方形的话那么1%约为圖宽度的百分之一。

接着我们在 iOS 的 Safari 测试下有一半 SVG 图标挂了？什么鬼！

之前的部分提到过Firefox 浏览器目前支持选中 <use> 标签创建的 Shadow DOM 中的内容，所以如果写了这样的 CSS：

在 Firefox 浏览器中就会变成类似这样：

圖标在其他浏览器中是绿色的但是在 Firefox 浏览器中会是红色，因为内部的 <svg> 标签按照 CSS 第一行中的 fill: red 去渲染