文章目录

Vanessa

成为 B3log 赞助者

存档: 2017 年 05 月 (1)

如何使用 SVG 做图标

好吧,不的不说太久没写文章了,都不知道自己在忙些啥,感觉最近又 get 了一些新技能,很想和大家分享一下。 感觉很久以前,应该是 2010 年左右,在 svg 和 canvas 之间,我鄙视了一把 svg,可是如今我却不得不去学习它。真是世事难料,就好比有人花了 2K 个比特币买了个:pizza: SVG Sprite 背景 在 https://hacpai.com/article/1464879728790 之后,决定把 font icon 换为 svg,具体可参见这个 issue. 但是由于当时该到一半的时候总觉得缺点什么,就停止了移植。直到我遇见了 SVG Sprite 以后,才下定了决心,再复杂也要迁移。然后花了20个小时才移植完。 介绍 通俗的说就是把单个 svg 合并到一大个 svg 文件里面,有点类似以前的雪碧图。 使用方式和 CSS 差不多,分为内联、嵌入、链接、导入。个人比较中意链接,写法如下: symbol.svg <svg> <defs> <symbol id="logo" viewBox="0 0 16 16"> <p....