SVG 简介

什么是SVG

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 使用 XML 格式定义图像。
它是可以用于描述静态图、动画，以及用户界面的一种图形格式。1999年由万维网联盟发布。于2013年成为W3C推荐标准。

SVG有哪些优势

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

SVG在小程序中的使用

由于前面提到的SVG的特性，因此他被广泛应用于各种开发中，尤其适合各种icon和图标

获取SVG资源

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

iconfont 上有大量免费设计的一些通用图标，而且支持导出为PNG，SVG，AI，SVG代码等

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

获取对应SVG代码

<svg t="1629184236836" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3737" width="48" height="48"><path d="M736 32h-448c-54.4 0-96 41.6-96 96v768c0 54.4 41.6 96 96 96h448c54.4 0 96-41.6 96-96v-768c0-54.4-41.6-96-96-96z m-480 96c0-19.2 12.8-32 32-32h448c19.2 0 32 12.8 32 32v64h-512v-64z m512 768c0 19.2-12.8 32-32 32h-448c-19.2 0-32-12.8-32-32v-640h512v640z" p-id="3738"></path><path d="M512 832m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="3739"></path></svg>

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

由于微信小程序的限制，我们不能像在web中一样直接使用SVG，只能是通过css，设置背景图片的方式来设置。因此我们先要把优化后的SVG转化为Base64格式。我一般用下面的地址：
链接: https://codepen.io/jakob-e/pen/doMoML

background-image: url("data:image/svg+xml,%3Csvg t='1629184236836' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='3737' width='48' height='48'%3E%3Cpath d='M736 32h-448c-54.4 0-96 41.6-96 96v768c0 54.4 41.6 96 96 96h448c54.4 0 96-41.6 96-96v-768c0-54.4-41.6-96-96-96z m-480 96c0-19.2 12.8-32 32-32h448c19.2 0 32 12.8 32 32v64h-512v-64z m512 768c0 19.2-12.8 32-32 32h-448c-19.2 0-32-12.8-32-32v-640h512v640z' p-id='3738'%3E%3C/path%3E%3Cpath d='M512 832m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z' p-id='3739'%3E%3C/path%3E%3C/svg%3E");

在具体代码中引用SVG

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

<view class="ker-login"><view class="ker-login-content"><view class="login-tabs"><text class="title" :class="{ active: activeIndex === index }" v-for="(item, index) in tabsList" :key="index" @click="activeIndex = index">{{ item }}</text></view><view class="login-form-box"><view class="from-box-icon phone"></view><input class="from-box-input" type="text" placeholder="请输入你的手机号" value="" /></view><view class="login-form-box"><view class="from-box-icon verification"></view><input class="from-box-input" type="text" placeholder="验证码" value="" /><ker-countdown-verify borderRadius="20" borderColor="#ff7a00"></ker-countdown-verify></view><view class="login-form-box"><view class="from-box-icon password"></view><input class="from-box-input" :password="isPassword" placeholder="请设置密码" /><text @click="isPassword = !isPassword">{{ isPassword ? '显示' : '隐藏' }}</text></view><button class="login-form-btn">登录</button></view></view>

.ker-login {height: 100vh;width: 100vw;.ker-login-content {position: absolute;top: 15%;left: 50%;width: 85%;height: 70%;transform: translateX(-50%);background-color: #fff;border-radius: 8px;padding: 25px 0;box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);.login-tabs {display: flex;justify-content: center;padding-bottom: 25px;.title {position: relative;font-size: 12px;padding: 5px 20px;border-radius: 20px;margin: 0 10px;color: #999;&.active {background-color: #ffae00;color: #fff;}&.active::after {content: '';position: absolute;bottom: -8px;left: 50%;width: 0px;height: 0px;font-size: 0;line-height: 0;transform: translateX(-50%);overflow: hidden;border-width: 4px;border-style: solid dashed dashed dashed;border-color: #ffae00 transparent transparent transparent;}}}.login-form-btn {padding: 0;position: absolute;left: 50%;bottom: 30px;width: 130px;color: #fff;font-size: 14px;transform: translateX(-50%);background-color: #ff7a00;border-radius: 50px;box-shadow: 0 0 10px rgba(255, 122, 0, 0.3);}.login-form-box {width: 250px;padding: 8px 15px;background-color: #f7f9fa;margin: 0 auto;display: flex;align-items: center;border-radius: 50px;margin-bottom: 15px;.from-box-icon {width: 20px;height: 20px;font-size: 14px;margin-right: 10px;background-size: cover;}.from-box-input {flex: 1;font-size: 12px;color: #999;}text {font-size: 12px;padding: 5px;color: #ccc;}}}.phone {background-image: url("data:image/svg+xml,%3Csvg t='1629181363735' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='18960' width='48' height='48'%3E%3Cpath d='M724.350707 63.353535H297.787475C253.310707 63.353535 217.212121 99.555556 217.212121 143.928889v736.245656c0 44.476768 36.20202 80.575354 80.575354 80.575354h426.563232c44.476768 0 80.575354-36.20202 80.575354-80.575354V143.928889c0-44.476768-36.098586-80.575354-80.575354-80.575354zM297.787475 104.727273h426.563232c21.617778 0 39.201616 17.583838 39.201616 39.201616V179.717172H258.585859v-35.788283C258.585859 122.311111 276.169697 104.727273 297.787475 104.727273zM258.585859 221.090909h505.069899v527.72202H258.585859V221.090909z m465.764848 698.285253H297.787475c-21.617778 0-39.201616-17.583838-39.201616-39.201617v-89.987878h505.069899v89.987878c-0.103434 21.617778-17.687273 39.201616-39.305051 39.201617z m0 0' p-id='18961' fill='%23999999'%3E%3C/path%3E%3Cpath d='M435.975758 149.721212h150.083232c8.274747 0 14.99798-6.723232 14.99798-14.99798 0-8.274747-6.723232-14.99798-14.99798-14.997979H435.975758c-8.274747 0-14.99798 6.723232-14.99798 14.997979 0 8.274747 6.723232 14.99798 14.99798 14.99798z m0 0M457.490101 855.660606c0 19.135354 10.214141 36.822626 26.789495 46.403232 16.575354 9.567677 37.003636 9.567677 53.57899 0a53.575111 53.575111 0 0 0 26.789495-46.403232c0-29.595152-23.983838-53.57899-53.57899-53.57899-29.595152 0-53.57899 23.983838-53.57899 53.57899z m0 0' p-id='18962' fill='%23999999'%3E%3C/path%3E%3C/svg%3E");}.verification {background-image: url("data:image/svg+xml,%3Csvg t='1629181097778' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='13612' width='48' height='48'%3E%3Cpath d='M513.04903111 939.34705778c-2.47011555 0-4.94023111-0.30833778-7.35232-0.92046223-3.74556445-0.95573333-92.62990222-24.10496-182.38236444-87.0957511-121.22680889-85.08074667-185.30645333-202.06592-185.30645334-338.28864V212.73031111a29.72672 29.72672 0 0 1 29.72672-29.72672c161.90008889 0 328.99640889-93.56174222 330.66325334-94.50609778a29.69258667 29.69258667 0 0 1 29.56401778 0.15701334c1.61336889 0.93297778 164.96412445 94.34908445 328.29781333 94.34908444a29.72672 29.72672 0 0 1 29.72672 29.72672v300.31189334c0 135.41262222-63.67800889 252.12472889-184.14136889 337.51381333-89.19950222 63.22972445-177.54794667 86.84544-181.25937778 87.81824-2.46897778 0.65194667-5.00849778 0.9728-7.53664 0.9728zM197.46133333 241.56615111v271.47605334c0 117.10919111 53.34926222 214.20714667 158.55616 288.61553777 66.78300445 47.22005333 134.74133333 70.27712 156.92458667 77.01731556 22.08426667-6.86193778 89.60682667-30.24554667 155.95861333-77.63512889 104.59591111-74.69966222 157.63569778-171.59395555 157.63569778-287.99772444V241.58435555c-140.56106667-8.10894222-270.57265778-70.67420445-313.64664889-93.41724444-43.60874667 22.57351111-175.94481778 85.20817778-315.42840889 93.40017778z' fill='%23999999' p-id='13613'%3E%3C/path%3E%3Cpath d='M484.352 662.59854222a29.63342222 29.63342222 0 0 1-21.01703111-8.70286222L328.92472889 519.49112889a29.72672 29.72672 0 0 1 42.03633778-42.04088889l113.39093333 113.39093333 196.43960889-196.45098666a29.72672 29.72672 0 0 1 42.04202666 42.03633778L505.37699555 653.89568a29.65048889 29.65048889 0 0 1-21.02499555 8.704z' fill='%23999999' p-id='13614'%3E%3C/path%3E%3C/svg%3E");}.password {background-image: url("data:image/svg+xml,%3Csvg t='1629181296748' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='17342' width='48' height='48'%3E%3Cpath d='M806.7 375.4h-78.8v-48c0-114.9-92.6-208-206.8-208-114.2 0-206.7 93.1-206.7 208v48h-78.8c-21.7 0-39.4 17.6-39.4 39.4v413.5c0 21.8 17.6 39.4 39.4 39.4h571.1c21.8 0 39.4-17.6 39.4-39.4V414.7c0-21.7-17.6-39.3-39.4-39.3z m-433.2-48c0-82.1 66.2-148.9 147.7-148.9 81.5 0 147.7 66.8 147.7 148.9v48H373.5v-48zM787 808.6H255.3V434.4H787v374.2z' fill='%23999999' p-id='17343'%3E%3C/path%3E%3Cpath d='M491.6 645.6v103.9c0 10.9 8.8 19.7 19.7 19.7H531c10.9 0 19.7-8.8 19.7-19.7V645.6c34.3-12.2 59.1-44.7 59.1-83.2 0-48.9-39.7-88.6-88.7-88.6-48.9 0-88.6 39.7-88.6 88.6 0.1 38.6 24.8 71 59.1 83.2z m29.6-112.7c16.3 0 29.6 13.2 29.6 29.5S537.5 592 521.2 592s-29.5-13.2-29.5-29.6c-0.1-16.3 13.2-29.5 29.5-29.5z' fill='%23999999' p-id='17344'%3E%3C/path%3E%3C/svg%3E");}
}

展示效果

微信小程序 icon图标 SVG代码转码为Base64编码格式并使用（霸霸看了都说好）相关推荐

【愚公系列】2022年08月微信小程序-icon图标详解
文章目录前言一.自带图标二.实现图标的五种方案 1.图片 2.精灵图 3.CSS绘图 4.矢量字体 4.1 使用步骤 5.SVG格式前言在小程序中经常会用到各种各样的图标,如果这些图标都使用 ...
微信小程序icon图标自适应大小，最新篇
在page页面使用时: 先在data:创建一个wh: data: {wh: ''}, onLoad: function (options) {var that = thiswx.getSystemIn ...
遥遥领先一键导出微信小程序、UNIAPP低代码源码使用介绍
1.1添加组件至设计器在左侧基本组件库选择要使用的组件,按住左键不放,拖动到设计器适合的位置上松开. 1.2修改组件图层名称修改组件图层名称,方便快速定位组件位置.找到图层面板按钮,点击显示图层面 ...
微信小程序中使用SVG
最近在作一个微信小程序的项目,需要使用svg引入矢量图标,总结一下svg在小程序中的使用. SVG 简介什么是SVG SVG是"Scalable Vector Graphics" ...
微信小程序开发之SVG的使用
因为工作的原因,最近开始接触并且了解微信小程序.太久没有写或者看过前端相关的代码,加上小程序本身的bug也比较多,中间发现坑还是不少,后面逐渐整理总结一下.这一篇先总结一下svg在小程序中的使用. S ...
微信小程序：图标的使用（icon）
摘要: 图标主要是用来辅助ui界面的,常用的是√和×,像蓝牙和wifi是否连上的标志,让人直观明了. icon的参数组件icon的参数主要有三个,下图所示: (1)type:icon的类型,官方给出 ...
html中%3csvg%3e标签的使用,微信小程序：使用svg
先确定一点,微信小程序中使用svg标签,并不会像沃恩在html中使用一样,因为小程序并不会认可'svg'这个标签,所以我们要讨论的,是微信小程序中怎么使用svg, 先备注一点:为啥使用svg?这个没有 ...
微信小程序自定义图标动态显示不同颜色
微信小程序自定义图标动态显示不同颜色该方法不仅仅局限于阿里图标,后台传过来的图标依旧适用,但是后台上传图标的时候需要上传svg格式的图片呢. 主要思路是什么呢:后台上传的svg图片,先使用小程序提供 ...
原生微信小程序圆形倒计时svg组件
#写在最前# 微信小程序不支持svg标签,需要把svg转成base64用background属性展示,缺点是执行倒计的时候,圆形轨道无法做动画,只能很生硬的展示每一帧:优点时非常清晰,不会有锯齿. # ...

微信小程序 icon图标 SVG代码转码为Base64编码格式并使用（霸霸看了都说好）

文章目录