android 代码修改svg文件 svg-icon代码格式

文章目录

• SVG 简介

• 什么是SVG
• SVG有哪些优势

• SVG在小程序中的使用

• 获取SVG资源
• 获取对应SVG代码
• 将SVG代码转码为Base64编码格式
• 在具体代码中引用SVG
• 展示效果

SVG 简介

什么是SVG

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

SVG有哪些优势

1. SVG 可被非常多的工具读取和修改
2. SVG 与JPEG和GIF图像比起来，尺寸更小，且可压缩性更强。
3. SVG 使用 XML 格式定义图形
4. 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");
	}
}

展示效果