微信小程序中使用SVG

最近在作一个微信小程序的项目，需要使用svg引入矢量图标，总结一下svg在小程序中的使用。

SVG 简介

什么是SVG

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

SVG的优势

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

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

在小程序中的使用

因为微信小程序的限制，我们不能在小程序中像web中一样直接使用如下的svg代码，只能通过设置背景图片background-image : url(“base64转码后的代码”);的方式来进行操作。
所以在小程序中使用svg需要以下几步：

1. 获取svg代码
2. 将svg代码转换为base64编码格式
3. 使用css将背景图换为base64转码后的代码。

首先获取svg代码

我这里是直接从xd中获取的图标svg代码

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48.001" height="50" viewBox="0 0 48.001 50">
  <defs>
    <clipPath id="clip-path">
      <path id="vectorMask" d="M205.673,742a12.443,12.443,0,0,1-7.749-2.709A12.083,12.083,0,0,1,196.4,721.8a1.271,1.271,0,0,0-.122-1.808,1.307,1.307,0,0,0-1.831.119,14.637,14.637,0,0,0-3.209,13.454,8.635,8.635,0,0,1-2.3.32H182.2a9.6,9.6,0,0,1-5.368-1.752,10.277,10.277,0,0,1-3.653-4.453L170.8,722.3a7.673,7.673,0,0,1-.8-3.375,6.532,6.532,0,0,1,.795-3.084c1.4-2.6,4.506-4.4,8.517-4.952l.331-.041a10.142,10.142,0,0,0,12.416.258A12.747,12.747,0,0,1,198,713.947a7.129,7.129,0,0,1,2.483,4.824,12.449,12.449,0,0,1,13.906,2.437,12.078,12.078,0,0,1,0,17.225A12.319,12.319,0,0,1,205.673,742Zm-3.478-9.914h0l-.917,2.719,2.751-.905-1.834-1.814Zm8.256-7.628a1.3,1.3,0,0,0-.917.375l-6.421,6.346,1.833,1.814,6.422-6.346a1.272,1.272,0,0,0,0-1.814A1.3,1.3,0,0,0,210.451,724.458ZM186.01,709.34a8.671,8.671,0,1,1,8.81-8.671A8.751,8.751,0,0,1,186.01,709.34Z" fill="none"/>
    </clipPath>
  </defs>
  <g id="edit_profile" data-name="edit profile" transform="translate(-169.998 -692)">
    <path id="Combined_Shape" data-name="Combined Shape" d="M205.673,742a12.443,12.443,0,0,1-7.749-2.709A12.083,12.083,0,0,1,196.4,721.8a1.271,1.271,0,0,0-.122-1.808,1.307,1.307,0,0,0-1.831.119,14.637,14.637,0,0,0-3.209,13.454,8.635,8.635,0,0,1-2.3.32H182.2a9.6,9.6,0,0,1-5.368-1.752,10.277,10.277,0,0,1-3.653-4.453L170.8,722.3a7.673,7.673,0,0,1-.8-3.375,6.532,6.532,0,0,1,.795-3.084c1.4-2.6,4.506-4.4,8.517-4.952l.331-.041a10.142,10.142,0,0,0,12.416.258A12.747,12.747,0,0,1,198,713.947a7.129,7.129,0,0,1,2.483,4.824,12.449,12.449,0,0,1,13.906,2.437,12.078,12.078,0,0,1,0,17.225A12.319,12.319,0,0,1,205.673,742Zm-3.478-9.914h0l-.917,2.719,2.751-.905-1.834-1.814Zm8.256-7.628a1.3,1.3,0,0,0-.917.375l-6.421,6.346,1.833,1.814,6.422-6.346a1.272,1.272,0,0,0,0-1.814A1.3,1.3,0,0,0,210.451,724.458ZM186.01,709.34a8.671,8.671,0,1,1,8.81-8.671A8.751,8.751,0,0,1,186.01,709.34Z" fill="#212c68" opacity="0.969"/>
    <g id="Mask_by_Combined_Shape" data-name="Mask by Combined Shape" clip-path="url(#clip-path)">
      <g id="Mask_by_Combined_Shape-2" data-name="Mask by Combined Shape">
        <g id="color">
          <rect id="color-2" data-name="color" width="60" height="60" transform="translate(164 688)" fill="#212c68" opacity="0.969"/>
        </g>
      </g>
    </g>
  </g>
</svg>

将SVG代码转码为Base64编码格式

可以使用下面的网址进行转码

• codepen.io
  将svg代码复制到如图所示位置，发现svg代码已经转化为base64编码
  

在代码中引用SVG

index.wxml

<view class="box">
	<view class="icon"></view>
	<view>编辑资料</view>
</view>

index.wxss

.box {
	display: flex;
  	flex-direction: column;
  	justify-content: center;
  	align-items: center;
}
/* 引用刚刚转换后的base64编码*/
.icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='48.001' height='50' viewBox='0 0 48.001 50'%3E %3Cdefs%3E %3CclipPath id='clip-path'%3E %3Cpath id='vectorMask' d='M205.673,742a12.443,12.443,0,0,1-7.749-2.709A12.083,12.083,0,0,1,196.4,721.8a1.271,1.271,0,0,0-.122-1.808,1.307,1.307,0,0,0-1.831.119,14.637,14.637,0,0,0-3.209,13.454,8.635,8.635,0,0,1-2.3.32H182.2a9.6,9.6,0,0,1-5.368-1.752,10.277,10.277,0,0,1-3.653-4.453L170.8,722.3a7.673,7.673,0,0,1-.8-3.375,6.532,6.532,0,0,1,.795-3.084c1.4-2.6,4.506-4.4,8.517-4.952l.331-.041a10.142,10.142,0,0,0,12.416.258A12.747,12.747,0,0,1,198,713.947a7.129,7.129,0,0,1,2.483,4.824,12.449,12.449,0,0,1,13.906,2.437,12.078,12.078,0,0,1,0,17.225A12.319,12.319,0,0,1,205.673,742Zm-3.478-9.914h0l-.917,2.719,2.751-.905-1.834-1.814Zm8.256-7.628a1.3,1.3,0,0,0-.917.375l-6.421,6.346,1.833,1.814,6.422-6.346a1.272,1.272,0,0,0,0-1.814A1.3,1.3,0,0,0,210.451,724.458ZM186.01,709.34a8.671,8.671,0,1,1,8.81-8.671A8.751,8.751,0,0,1,186.01,709.34Z' fill='none'/%3E %3C/clipPath%3E %3C/defs%3E %3Cg id='edit_profile' data-name='edit profile' transform='translate(-169.998 -692)'%3E %3Cpath id='Combined_Shape' data-name='Combined Shape' d='M205.673,742a12.443,12.443,0,0,1-7.749-2.709A12.083,12.083,0,0,1,196.4,721.8a1.271,1.271,0,0,0-.122-1.808,1.307,1.307,0,0,0-1.831.119,14.637,14.637,0,0,0-3.209,13.454,8.635,8.635,0,0,1-2.3.32H182.2a9.6,9.6,0,0,1-5.368-1.752,10.277,10.277,0,0,1-3.653-4.453L170.8,722.3a7.673,7.673,0,0,1-.8-3.375,6.532,6.532,0,0,1,.795-3.084c1.4-2.6,4.506-4.4,8.517-4.952l.331-.041a10.142,10.142,0,0,0,12.416.258A12.747,12.747,0,0,1,198,713.947a7.129,7.129,0,0,1,2.483,4.824,12.449,12.449,0,0,1,13.906,2.437,12.078,12.078,0,0,1,0,17.225A12.319,12.319,0,0,1,205.673,742Zm-3.478-9.914h0l-.917,2.719,2.751-.905-1.834-1.814Zm8.256-7.628a1.3,1.3,0,0,0-.917.375l-6.421,6.346,1.833,1.814,6.422-6.346a1.272,1.272,0,0,0,0-1.814A1.3,1.3,0,0,0,210.451,724.458ZM186.01,709.34a8.671,8.671,0,1,1,8.81-8.671A8.751,8.751,0,0,1,186.01,709.34Z' fill='%23212c68' opacity='0.969'/%3E %3Cg id='Mask_by_Combined_Shape' data-name='Mask by Combined Shape' clip-path='url(%23clip-path)'%3E %3Cg id='Mask_by_Combined_Shape-2' data-name='Mask by Combined Shape'%3E %3Cg id='color'%3E %3Crect id='color-2' data-name='color' width='60' height='60' transform='translate(164 688)' fill='%23212c68' opacity='0.969'/%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
	background-size: cover;
}

就实现了如图所示的效果

至此，我们就实现了在微信小程序中使用SVG资源。