svg图标不要转成base64，而是转成DataURI

文章2019-05-312,450 人已阅来源：原创

以前做项目时，有些个别图标想写在css中，又不想用图片，通常都是使用svg转成base64，然后在css里面写上一大坨代码。

最近才发现一篇好文章，才发现svg图标转成DataURI才是最优解决方案。今天把具体操作过程写出来分享一下。

为什么不建议把 svg转 Base64 来用？

base64 本身浏览器解码也会消耗一定的资源
svg 转 base64 后反而会变大

具体的数据原理等知识我也说不太明白，网上知识一大堆。在这里只把最基础的操作步骤给大家演示一下

实例操作步骤

以本站文章的时间图标为例，如下图：

svg图标不要转成base64，而是转成DataURI

1、先压缩svg图标代码

未压缩之前代码：

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1559315490270" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1437" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M544 224h-64v288c0 8.832 3.584 16.832 9.376 22.656l192 191.968 45.248-45.248L544 498.752V224z" fill="#181818" p-id="1438"></path><path d="M512 896C300.256 896 128 723.744 128 512S300.256 128 512 128s384 172.256 384 384-172.256 384-384 384m0-832C264.576 64 64 264.576 64 512s200.576 448 448 448 448-200.576 448-448S759.424 64 512 64" fill="#181818" p-id="1439"></path></svg>

压缩之后代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 175 175"><path d="M106.25,43.75H93.75V100a6.24,6.24,0,0,0,1.83,4.42l37.5,37.5,8.84-8.84L106.25,97.41Z" transform="translate(-12.5 -12.5)" style="fill:#181818"/><path d="M100,175a75,75,0,1,1,75-75,75.08,75.08,0,0,1-75,75m0-162.5A87.5,87.5,0,1,0,187.5,100,87.49,87.49,0,0,0,100,12.5" transform="translate(-12.5 -12.5)" style="fill:#181818"/></svg>

我常用的压缩工具如下：

Adobe Illustrator
Adobe XD
SVGO
SVGOMG
...

2、把svg图标转化成DataURI

先打网站https://codepen.io/jakob-e/pen/doMoML，页面滑动至一个文本输入框，描述是：Paste SVG Code here!

可能是我比较笨，当打开网址后不知道如何使用，后来才发现这个不起眼的输入框。在这里啰嗦一下

然后把svg的图标代码（也就是步骤1中的压缩之后代码），会自动生成一个DataURI代码，复制直接copy到css样式表中即可。

先不考虑浏览器解码，我们来对比一下DataURI和base64的代码量之差别

转成DataURI的代码：

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 175 175'%3E%3Cpath d='M106.25,43.75H93.75V100a6.24,6.24,0,0,0,1.83,4.42l37.5,37.5,8.84-8.84L106.25,97.41Z' transform='translate(-12.5 -12.5)' style='fill:%23181818'/%3E%3Cpath d='M100,175a75,75,0,1,1,75-75,75.08,75.08,0,0,1-75,75m0-162.5A87.5,87.5,0,1,0,187.5,100,87.49,87.49,0,0,0,100,12.5' transform='translate(-12.5 -12.5)' style='fill:%23181818'/%3E%3C/svg%3E

转成base64的代码：

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNzUgMTc1Ij48dGl0bGU+dGltZTwvdGl0bGU+PHBhdGggZD0iTTEwNi4yNSw0My43NUg5My43NVYxMDBhNi4yNCw2LjI0LDAsMCwwLDEuODMsNC40MmwzNy41LDM3LjUsOC44NC04Ljg0TDEwNi4yNSw5Ny40MVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMi41IC0xMi41KSIgc3R5bGU9ImZpbGw6IzE4MTgxOCIvPjxwYXRoIGQ9Ik0xMDAsMTc1YTc1LDc1LDAsMSwxLDc1LTc1LDc1LjA4LDc1LjA4LDAsMCwxLTc1LDc1bTAtMTYyLjVBODcuNSw4Ny41LDAsMSwwLDE4Ny41LDEwMCw4Ny40OSw4Ny40OSwwLDAsMCwxMDAsMTIuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEyLjUgLTEyLjUpIiBzdHlsZT0iZmlsbDojMTgxODE4Ii8+PC9zdmc+