微信小程序开发之SVG的使用

因为工作的原因，最近开始接触并且了解微信小程序。太久没有写或者看过前端相关的代码，加上小程序本身的bug也比较多，中间发现坑还是不少，后面逐渐整理总结一下。这一篇先总结一下svg在小程序中的使用。

SVG 简介

什么是SVG

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

SVG有哪些优势

与其他图像格式相比，使用SVG的优势在于：

• SVG 可被非常多的工具读取和修改
• SVG 与JPEG和GIF图像比起来，尺寸更小，且可压缩性更强。
• SVG 使用 XML 格式定义图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

SVG在小程序中的使用

由于前面提到的SVG的特性，因此他被广泛应用于各种开发中，尤其适合各种icon和图标，下面就结合具体的开发记录下小程序中使用SVG的过程。

获取SVG资源

目前常用的设计工具例如sketch等都支持将图形导出为SVG。当然如果没有设计图，如果只是一些常见的图标的话也可以去一些资源站点下载。下面是个人常用的资源站点：

• https://material.io/icons/

material上有大量基于Android的Material Design设计的一些通用图标，而且支持导出为PNG，SVG等，例如文章中的示例icon：

• https://material.io/icons/#ic_open_in_new

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

获取对应SVG代码

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

<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/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>