因为工作的原因,最近开始接触并且了解微信小程序。太久没有写或者看过前端相关的代码,加上小程序本身的bug也比较多,中间发现坑还是不少,后面逐渐整理总结一下。这一篇先总结一下svg在小程序中的使用。SVG 简介什 ... 因为工作的原因,最近开始接触并且了解微信小程序。太久没有写或者看过前端相关的代码,加上小程序本身的bug也比较多,中间发现坑还是不少,后面逐渐整理总结一下。这一篇先总结一下svg在小程序中的使用。 SVG 简介什么是SVGSVG是”Scalable Vector Graphics”的简称。中文可以理解成“可缩放矢量图形”。是一个基于XML的图形描述语言。它是可以用于描述静态图、动画,以及用户界面的一种图形格式。1999年由万维网联盟发布。于2013年成为W3C推荐标准。 SVG有哪些优势与其他图像格式相比,使用SVG的优势在于:
SVG在小程序中的使用由于前面提到的SVG的特性,因此他被广泛应用于各种开发中,尤其适合各种icon和图标,下面就结合具体的开发记录下小程序中使用SVG的过程。 获取SVG资源目前常用的设计工具例如sketch等都支持将图形导出为SVG。当然如果没有设计图,如果只是一些常见的图标的话也可以去一些资源站点下载。下面是个人常用的资源站点: material上有大量基于Android的Material Design设计的一些通用图标,而且支持导出为PNG,SVG等,例如文章中的示例icon: 根据下图的提示下载对应的图标的SVG资源 获取对应SVG代码使用任意文本编辑工具打开资源,可以看到里面的代码如下: <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www./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进行初步优化,点击上方的 <svg height="24" width="24" xmlns="http://www./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代码转码为Base64编码格式由于微信小程序的限制,我们不能像在web中一样直接使用SVG,只能是通过css,设置背景图片的方式来设置。因此我们先要把优化后的SVG转化为Base64格式。我一般用下面的地址: 打开网址以后,上推页面到下图位置,然后将之前生成的SVG代码复制到输入框中,发现SVG代码已经转化为Base64编码。 background-image: url("data:image/svg+xml, 228 bytes → 203 bytes 89.04%25 %3Csvg height='24' width='24' xmlns='http://www./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"); 如果是直接复制了svgomg中的代码,会发现生成的Base64代码中多了一点东西: url("data:image/svg+xml, 228 bytes → 203 bytes 89.04%25 %3Csvg` 代码中的 background-image: url("data:image/svg+xml, %3Csvg height='24' width='24' xmlns='http://www./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资源。文章中涉及到的所有代码已经开源到github,相关链接如下:
|
|