微信小程序：使用svg

先确定一点，微信小程序中使用svg标签，并不会像沃恩在html中使用<svg>一样，因为小程序并不会认可‘svg’这个标签，所以我们要讨论的，是微信小程序中怎么使用svg，

先备注一点：为啥使用svg？这个没有理由，喜欢就是喜欢，非要说就是减少网络请求

以icon-font上的代码为例子，首先，我们需要拿到一份‘svg代码；。比如：

<svg t="1571292868673" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2555" width="200" height="200"><path d="M1024 636.032c0-141.888-141.866667-257.429333-301.461333-257.429333-169.088 0-301.866667 115.541333-301.866667 257.429333 0 142.250667 132.778667 257.386667 301.866667 257.386667 35.370667 0 71.146667-9.024 106.496-17.642667l97.450667 53.418667-26.666667-88.789333C970.922667 786.965333 1024 715.84 1024 636.032zM624.618667 591.616c-17.642667 0-35.328-17.664-35.328-35.392 0-17.621333 17.685333-35.328 35.328-35.328 26.752 0 44.458667 17.706667 44.458667 35.328C669.077333 573.952 651.370667 591.616 624.618667 591.616zM820.010667 591.616c-17.664 0-35.306667-17.664-35.306667-35.392 0-17.621333 17.642667-35.328 35.306667-35.328 26.709333 0 44.416 17.706667 44.416 35.328C864.426667 573.952 846.293333 591.616 820.010667 591.616z" p-id="2556"></path><path d="M693.248 347.242667c11.626667 0 23.296 0.810667 34.901333 2.005333-31.274667-146.133333-187.392-254.464-365.674667-254.464C163.370667 94.784 0 230.442667 0 403.029333c0 99.562667 54.208 181.418667 144.917333 244.864L108.8 757.034667l126.826667-63.786667c45.354667 8.810667 81.877333 18.069333 126.848 18.069333 11.221333 0 22.506667-0.405333 33.749333-1.557333-7.232-24.128-11.242667-49.749333-11.242667-75.882667C384.96 475.690667 521.066667 347.242667 693.248 347.242667zM498.133333 248.896c27.285333 0 45.333333 18.069333 45.333333 45.376 0 27.264-18.069333 45.333333-45.333333 45.333333-27.306667 0-54.570667-18.069333-54.570667-45.333333C443.968 266.944 471.210667 248.896 498.133333 248.896zM244.458667 339.562667c-27.306667 0-54.570667-18.048-54.570667-45.333333 0-27.306667 27.285333-45.354667 54.570667-45.354667 27.328 0 45.397333 18.069333 45.397333 45.354667C289.834667 321.130667 271.786667 339.562667 244.458667 339.562667z" p-id="2557"></path></svg>

一般我们都是觉得直接使用就可以了吗，那么我们直接放上去呢？

 嗯，意料之中，没事，那么下一个议题，我们怎么使用它呢？

第一步，我们需要转化为一个真·svg路径，微信小程序中只能使用background-image属性/image标签，所以我们需要使用base64来实现，所以现在的目的就变成了：

如何在微信小程序中使用base64

如何将svg转化为base64

将svg转化为base64，一般我们建议使用工具，不过！这儿又有一个小问题想问问大家，大家怼base64熟悉吗？

是否听过这么一句话：

为啥？请参考：https://www.qianduan.net/dont-svg-base64/

好了，学习完上面链接的东西，明白了一点，啥是dataurl了，接着，我们第二个目标，就变相的完成了。大家记住下面这个网站（链接里面的）

svg转化为dataurl

嗯，接着来完成第一个任务，怎么在微信小程序中使用？

转化后的dataurl：

background-image: url("data:image/svg+xml,%3Csvg t='1571292868673' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2555' width='200' height='200'%3E%3Cpath d='M1024 636.032c0-141.888-141.866667-257.429333-301.461333-257.429333-169.088 0-301.866667 115.541333-301.866667 257.429333 0 142.250667 132.778667 257.386667 301.866667 257.386667 35.370667 0 71.146667-9.024 106.496-17.642667l97.450667 53.418667-26.666667-88.789333C970.922667 786.965333 1024 715.84 1024 636.032zM624.618667 591.616c-17.642667 0-35.328-17.664-35.328-35.392 0-17.621333 17.685333-35.328 35.328-35.328 26.752 0 44.458667 17.706667 44.458667 35.328C669.077333 573.952 651.370667 591.616 624.618667 591.616zM820.010667 591.616c-17.664 0-35.306667-17.664-35.306667-35.392 0-17.621333 17.642667-35.328 35.306667-35.328 26.709333 0 44.416 17.706667 44.416 35.328C864.426667 573.952 846.293333 591.616 820.010667 591.616z' p-id='2556'%3E%3C/path%3E%3Cpath d='M693.248 347.242667c11.626667 0 23.296 0.810667 34.901333 2.005333-31.274667-146.133333-187.392-254.464-365.674667-254.464C163.370667 94.784 0 230.442667 0 403.029333c0 99.562667 54.208 181.418667 144.917333 244.864L108.8 757.034667l126.826667-63.786667c45.354667 8.810667 81.877333 18.069333 126.848 18.069333 11.221333 0 22.506667-0.405333 33.749333-1.557333-7.232-24.128-11.242667-49.749333-11.242667-75.882667C384.96 475.690667 521.066667 347.242667 693.248 347.242667zM498.133333 248.896c27.285333 0 45.333333 18.069333 45.333333 45.376 0 27.264-18.069333 45.333333-45.333333 45.333333-27.306667 0-54.570667-18.069333-54.570667-45.333333C443.968 266.944 471.210667 248.896 498.133333 248.896zM244.458667 339.562667c-27.306667 0-54.570667-18.048-54.570667-45.333333 0-27.306667 27.285333-45.354667 54.570667-45.354667 27.328 0 45.397333 18.069333 45.397333 45.354667C289.834667 321.130667 271.786667 339.562667 244.458667 339.562667z' p-id='2557'%3E%3C/path%3E%3C/svg%3E");

嗯？看到了吗？background-image，那么？难道？也许？是下面这种用法？

嗯，那我们就间接的完成了，而且学习了一个新东西：

dataurl

参考链接：https://www.qianduan.net/dont-svg-base64/