svg在小程序中的使用简介什..？

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

svg在小程序中的使用简介什..？

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

SVG简介什么是SVG

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

SVG有什么优点？

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

SVG在小程序中的使用

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

获取SVG资源

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

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

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

获取对应的SVG代码

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

<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="/2000/svg">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
svg>

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

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

<svg height="24" width="24" xmlns="/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>svg>

将 SVG 代码转换为编码格式

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

打开网址后，将页面上推到下图位置微信小程序开发svg在小程序中的使用简介什..？，然后将之前生成的SVG代码复制到输入框中，发现SVG代码已经转换为编码了。

background-image: url("data:image/svg+xml, 228 bytes → 203 bytes 89.04%25 %3Csvg height='24' width='24' xmlns='/2000/svg'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 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");

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

url("data:image/svg+xml, 228 bytes → 203 bytes 89.04%25 %3Csvg`

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

background-image: url("data:image/svg+xml, %3Csvg height='24' width='24' xmlns='/2000/svg'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 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");

具体代码中参考SVG

至此，我们就完成了在小程序中使用SVG的所有准备工作。 接下来，在代码中使用它与在普通 CSS 中引用 SVG 没有太大区别。 具体代码如下：

相关资源：

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

小程序代码片段（可以使用小程序开发工具直接导入）：

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等