现在有很多种方法在网页中使用 SVG 图标,我并没有把它们全部尝试一遍,我将要介绍的方法是我们 Kaliop 的前端团队所使用的,目前能够很好的满足我们的开发需求,比如:

 

基于大型 CMS 系统的内容管理网站(非全栈 JS 的 Web App).

 

图标通常简单且单色(可能根据网站内容和交互来使用不同的颜色),也有可能是单个图标有两种不同颜色.

 

支持 IE9+.

 

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

 

准备图标

 

制作 SVG sprite

 

将图标放入网页

 

在 Webpack 中使用 SVG 图标 #译者拓展部分

 

用 CSS 给图标增加样式

 

进阶技巧

 

部分浏览器存在的 bug

 

第一步:准备图标

 

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

 

图标在 Illustrator (左) 和 Sketch (右)的画板上显示效果

 

新建一个文件或画板

 

在常用的绘图工具中新建一个文件或者画板,将图标复制粘贴到中间,最好确保图标是纯净的,没有隐藏图层.

 

正方形更好

 

图标不需要非得是正方形的,除非图标太宽或者太高,否则还是建议做成正方形的图标,更好处理.当你有像素级的需求时,比如想要在低分辨率屏幕上获得更好的显示效果,就需要确定图标尺寸.比如图标需要适应 15x15 px 的网格,而且用的时候也多是这个尺寸时,就应该去创建 15x15 px 的画板.不确定的时候,一般建议选择 20x20 的尺寸.

 

毛边问题

 

在边缘区域留一点点空白,特别是对圆形图标.浏览器渲染 SVG 时会做抗锯齿处理,但是,有时抗锯齿产生的额外像素点会跑到 viewBox 的外面,从而导致图标的边缘看上去被切掉了一部分,看起来有点方.

 

图标边缘未做留白处理,所以可能边缘渲染出方形的边,当浏览器对 SVG 的渲染不给力时,效果更糟糕.

 

因此,每次处理 16px 或 20px 的图标时,要记得在每个边缘留 0.5px 或 1px 的空白,还要记得导出整个画板,而不是选中位于中间的路径,否则边缘的留白是不会导出.

 

导出 SVG

 

在 Illustrator 中,选择 “Save As” 并选择格式为 “SVG”(也许选择 “Export as…” 会更好).

 

在 Sketch 中,先选中画板,点击右下角 “Make Exportable”,并选择格式为 “SVG”.

 

在 Inkscape 中,选择 “Save As” 并选择格式为 “Optimized SVG”.

 

关于 SVG 的知识点

 

你可能学习过关于 SVG 的基础知识,并且能读懂 SVG 的结构.至少你知道:

 

SVG 元素: <svg>,<symbol> ,<g>, <path>

 

SVG 属性: d, fill, stroke, stroke-width

 

注意:从绘图工具中导出的 SVG 经常带着一些不必要的内容和标签等(其中 d 下面包含了清晰的路径数据),可以使用工具比如 SVGOMG ,然后比较一下处理前后哪些东西是移除或简化过的.

 

移除颜色数据

 

对于单色图标,确保:

 

在源文件中, path 的颜色都是黑色(#000000).

 

在导出的 SVG 文件中,没有 fill 属性.

 

如果我们在 SVG 文件中设置了 fill 属性,就不能通过 CSS 来改变颜色了,所以最好把颜色相关数据都删掉,至少对单色的图标这样.

 

Illustrator 导出的SVG 中 path 都是黑色(#000000)且不带 fill 属性,但 Sketch 导出的文件会带,得自己手动删掉像 fill="#000000" 这种属性.