最近在作一个微信小程序的项目，需要使用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需要以下几步：

获取svg代码
将svg代码转换为base64编码格式
使用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资源。

微信小程序中使用SVG相关推荐

mpvue微信小程序中使用svg图标，并通过代码动态改变图标颜色
微信小程序,mpvue中使用svg图标,并通过代码改变图标颜色本文主要是mpvue开发小程序的代码,不过微信小程序原生开发应该也是一样的,思路都是通用的,按照这个思路微信小程序原生开发一样可以实现同 ...
html中%3csvg%3e标签的使用,微信小程序：使用svg
先确定一点,微信小程序中使用svg标签,并不会像沃恩在html中使用一样,因为小程序并不会认可'svg'这个标签,所以我们要讨论的,是微信小程序中怎么使用svg, 先备注一点:为啥使用svg?这个没有 ...
微信小程序开发之SVG的使用
因为工作的原因,最近开始接触并且了解微信小程序.太久没有写或者看过前端相关的代码,加上小程序本身的bug也比较多,中间发现坑还是不少,后面逐渐整理总结一下.这一篇先总结一下svg在小程序中的使用. S ...
Canvas 动画引擎解析与微信小程序中的应用
点击观看大咖分享抗击疫情,腾讯云在行动.在开发微信小程序的过程中,我们经常需要展现一些图形和图表.目前市面上有好几款常用的图形库,在这些图形库的底层都有渲染引擎在支撑. ZRender 是其中一款非 ...
如何在微信小程序中使用.ttf字体
在小程序内,不支持使用 webfont 的 @font-face 引入本地的 ttf 等文件,这时候需要使用线上地址或者 base64. 第一步: 在阿里的iconfont中找到自己想要的字体加入购物 ...
微信小程序中使用阿里iconfont
1.从阿里iconfont中下载自己的iconfont项目 2.下载成功之后解压至项目文件夹下我们需要用到的文件只有以上箭头的四个 3.如果我们直接使用.ttf .woff .woff2文件,在进行 ...
微信小程序 icon图标 SVG代码转码为Base64编码格式并使用（霸霸看了都说好）
文章目录 SVG 简介什么是SVG SVG有哪些优势 SVG在小程序中的使用获取SVG资源获取对应SVG代码将SVG代码转码为Base64编码格式在具体代码中引用SVG 展示效果 SVG 简 ...
微信小程序中使用wxss加载图片并实现动画
微信小程序中使用wxss加载图片并实现动画记录微信小程序中使用wxss加载图片并实现动画的方式,最终实现loading效果. 代码 .weui-loading { margin: 0 5px; wi ...
微信小程序setinterval_微信小程序中setInterval的使用方法
微信小程序中setinterval的使用方法看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 "弹啊弹,弹走鱼尾纹的小球",一起来看下吧.过程不重要主要是画布的使用哦 ...

微信小程序中使用SVG