不是什么新知识,一个小技巧而已。
今天遇到一个项目中使用纯色图标的问题,用字体麻烦用图片low,所以就想直接用svg,毕竟只有一两个图标。
第一想法是用 DataURI,然后想到了之前 CSS-tricks 的文章,翻了下做下汇总:
base64 只是声明 data 使用 base64 编码而已,非必须(viaRFC 2397)
- data:[<mediatype>][;base64],<data>
比如,前端观察的 logo 的 svg,sketch 导出后有 702 byte,svgo 压缩后是 292 byte,base64 转码后是 937 byte。
最后代码如下:
- background - image: url("data:image/svg+xml,");
来源: http://www.tuicool.com/articles/vQZreuy