因为工作的原因，最近开始接触和了解微信小程序。 已经很久没有写或读过前端相关的代码了。 另外，小程序本身也存在不少Bug。 在这个过程中还发现了很多陷阱。 后面我会慢慢总结。 本文首先总结一下svg在小程序中的使用。

SVG 简介

什么是 SVG

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

SVG有什么优点？

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

SVG在小程序中的使用

由于SVG的上述特点，它被广泛应用于各种开发中sketch导出svg图标sketch导出svg图标，特别适合各种图标、图标。 下面将根据具体开发记录一下在小程序中使用SVG的过程。

获取SVG资源

目前常用的设计工具如SVG都支持将图形导出为SVG。 当然，如果你没有设计图，只要有一些常用的图标，也可以从一些资源站下载。 以下是个人常用的资源网站：

基于设计的常见图标有大量，并且支持导出为PNG、SVG等，例如文章中的示例图标：

按照下图提示下载对应图标的SVG资源。

获取对应的SVG代码

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

最外面的`fill="#"`是SVG的填充颜色。 可以根据自己的需要修改对应​​的填充颜色（因为例子中的SVG比较简单，只有一种填充颜色，不是所有SVG最外层的填充。都是他的填充颜色）。 我们可以直接使用这部分代码，也可以通过一些SVG优化工具进一步优化。 目前我一般使用：

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

将 SVG 代码转换为编码格式

由于微信小程序的限制，我们无法像在网页上那样直接使用SVG。 我们只能通过css来设置，设置背景图片。 因此，我们首先需要将优化后的SVG转换为格式。 我通常使用以下地址：

打开网址后，将页面向上推送到下图位置，然后将之前生成的SVG代码复制到输入框中，发现SVG代码已经转换为编码了。

-image: url("data:image/svg+xml, 228字节→203字节 89.04%25 %3Csvg xmlns='http://www.w3.org/2000/svg'%3E%d='M0' 填充='无'/%3E% d='M19 -1.11 0-2 .9-2 ​​1.1.89 2 2 .1 0 2-.9 2-2v-7h- 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.-7z'/%3E%3C/svg%3E");

如果直接把代码复制进去，你会发现生成的代码多了一点：

`url("数据:image/svg+xml, 228 字节 → 203 字节 89.04%25 %3Csvg`

代码中的“228字节→203字节89.04%25”为无效信息，需要手动删除。 删除后，SVG代码变为：

-image: url("数据:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg'%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- 3v2h3.59l-9.83 9.83 1.41 1.41L19 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资源的使用。 文章涉及的所有代码均已开源，相关链接如下：

努力学习技术，专心打造高品质产品

如有侵权请联系删除！