因为工作的原因，最近开始接触和了解微信小程序。已经很久没有写过或者看过前端相关的代码了，而且小程序本身的bug也不少。中间发现了很多坑，后面会慢慢整理总结。本文先总结一下小程序中svg的使用。

SVG 简介

什么是 SVG

SVG是“ ”的缩写，中文可以理解为“可缩放矢量图形”，是一种基于XML的图形描述语言，是一种可以用来描述静态图像、动画和用户界面的图形格式，由万维网联盟于1999年发布，2013年成为W3C推荐标准。

SVG 有哪些优点

与其他图像格式相比，使用 SVG 的优点是：

在小程序中使用 SVG

由于上面说的SVG的特点，它在各类开发中被广泛使用，尤其适合各类图标、图标。下面会结合具体的开发，记录一下在小程序中使用SVG的过程。

获取 SVG 资源

目前常用的设计工具如.png都支持将图形导出为SVG，当然如果没有设计图的话，如果只是一些常用的图标，也可以去一些资源站下载，下面是我经常用到的一些资源站：

根据设计提供了很多常用的图标，并且支持导出为PNG、SVG等，比如文章中的示例图标：

根据下图提示下载对应的图标SVG资源

获取相应的SVG代码

使用任意文本编辑工具打开该资源，都可以看到里面的代码如下：

最外层的 `fill="#"` 是 SVG 的填充颜色，可以根据需要修改对应​​的填充颜色（由于示例中的 SVG 比较简单，所以只有一种填充颜色，且并不是所有的 SVG 的最外层填充颜色都一样）。我们可以直接使用这部分代码，也可以借助一些 SVG 优化工具进一步优化，目前我一般使用：

直接将SVG图片拖拽到页面右侧的画布中，它会根据一些常见的优化方法对SVG进行初步的优化，点击上方的``按钮，你会看到SVG的代码发生了变化（当然，由于我们的示例图标比较简单，主要目的是删除代码之间的无效空格）：

将SVG代码转换为编码格式

由于微信小程序的限制，我们无法像在网页中一样直接使用SVG，只能使用CSS来设置背景图，因此需要先将优化好的SVG转成格式，我一般使用如下地址：

打开网址之后，向上滚动到下图所示的位置，然后把之前生成的SVG代码复制到输入框中，你会发现SVG代码已经转化成了代码。

-: url("data:/svg+xml,228 → 203 89.04%25%=''%3E%d='M0' fill='none'/%3E%d='M19 -1.11 0-2 .9-2 1.1.89 2 2 .1 0 2-.9 2-2v-7h-.59l-9.83 9.83 1.41 1.6.-7z'/%3E%3C/svg%3E");

如果你直接将代码复制进去，你会发现生成的代码里多了一些东西：

`url("数据:/svg+xml, 228 → 203 89.04%25 %`

代码中的 228 → 203 89.04%25 为无效信息，需要手动删除，删除之后SVG代码变成：

-: url("data:/svg+xml, %=''%3E%d='M0' fill='none'/%3E%d='M19 -1.11 0-2 .9-2 1.1.89 2 2 .1 0 2-.9 2-2v-7h-.59l-9.83 9.83 1.41 1. 6.-7z'/%3E%3C/svg%3E");

在特定代码中引用 SVG

至此，我们已经完成了小程序中使用SVG的所有准备工作，下面的代码跟普通的CSS引用SVG类似，具体代码如下：

- .wxml文件：

   在新窗口打开

- .wxss：

.svg-demo-container {  margin: 50rpx;  width: 300rpx;  display: flex;  align-items: center; } .svg-demo-text {  color: #888896;  font-size: 26rpx;  margin-left: 9rpx; } .icon-open-new {  background-image: url("data:image/svg+xml, %3Csvg height='24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");  background-size: cover; } .icon {  display: inline-block;  width: 50rpx;  height: 50rpx; }

- 结果显示：

相关资源

OK，现在我们就实现了微信小程序中SVG资源的使用，文章中涉及到的代码全部已经开源，相关链接如下：

努力学习技术，专心做优质产品