文章目录
SVG 简介什么是SVGSVG有哪些优势 SVG在小程序中的使用获取SVG资源获取对应SVG代码将SVG代码转码为Base64编码格式在具体代码中引用SVG展示效果SVG 简介
什么是SVG
SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 使用 XML 格式定义图像。
它是可以用于描述静态图、动画，以及用户界面的一种图形格式。1999年由万维网联盟发布。于成为W3C推荐标准。
SVG有哪些优势
SVG 可被非常多的工具读取和修改SVG 与JPEG和GIF图像比起来，尺寸更小，且可压缩性更强。SVG 使用 XML 格式定义图形SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失SVG在小程序中的使用
由于前面提到的SVG的特性，因此他被广泛应用于各种开发中，尤其适合各种icon和图标
获取SVG资源
目前常用的设计工具例如sketch等都支持将图形导出为SVG。当然如果没有设计图，如果只是一些常见的图标的话也可以去一些资源站点下载。下面是个人常用的资源站点：
链接: /
iconfont 上有大量免费设计的一些通用图标，而且支持导出为PNG，SVG，AI，SVG代码等
根据下图的提示下载对应的图标的SVG资源：
获取对应SVG代码
<svg t="1629184236836" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="/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='/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='/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.2 80.575354 80.575354 80.575354h426.563232c44.476768 0 80.575354-36.2 80.575354-80.575354V143.928889c0-44.476768-36.098586-80.575354-80.575354-80.575354zM297.787475 104.727273h426.563232c21.617778 0 39.16 17.583838 39.16 39.16V179.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.16-17.583838-39.16-39.17v-89.987878h505.069899v89.987878c-0.103434 21.617778-17.687273 39.16-39.305051 39.17z 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='/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.2333 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='/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");}}
