⼩程序⾥使⽤SVG⽮量图标⽅法详解
在⼩程序开发过程中需要在⼩程序⾥使⽤SVG⽮量图标，⾄于为什么要使⽤SVG图标相信看到这篇⽂章的你应该明⽩，如果你不明⽩请百度⼀下
⼩程序⾥使⽤SVG⽮量图标有2种引⼊⽅法：
⼀、SVG图标转换为BASE64编码
注意：⽣成BASE64编码时需要把开头的data:image/svg；修改成data:image/svg+xml；这个在线⼯具的问题，使⽤其它在线BASE64编码功能时⼤家⼀定要注意
复制转换后的编码⾄wxss⽂件中相应的background-image:url("SVG图标BASE64编码")中，如下代码
.svg{background:url("data:svg+xml;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAACMCAIAAAAhotZpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i7 width:100rpx;
height:100rpx;
background-size: contain
}
同时还需要添加background-size: contain属性使图标能根据元素⼤⼩⾃动缩放
然后在wxss对应的wxml⽂件中添加
<view class="svg">
</view>
编译后的效果
⼆、使⽤运程地址引⼊SVG图标
把SVG图标上传到⽹站服务器上，在浏览器中输⼊SVG图标地址测试是否能正常打开
复制SVG图标地址到background-image:url(SVG图标URL地址)如下
.svg{background:url(mt/coding.svg);
小红旗图标怎么弄width:100rpx;
height:100rpx;
}
编译后的效果
总结：
第⼀种⽅法直接把SVG图标BASE64编码放到WXSS⽂件内，这样做会⼤⼤增加⼩程序的体积，如果要更换图标还需要重新编译上传，不推荐第⼆种⽅法相⽐第⼀种⽅法不会增加⼩程序的体积，需要更换图标时上传到服务器即可，⾮常灵活，推荐使⽤第⼆种⽅法
更多⼩程序开发⽂章请点击下⽅相关⽂章查阅
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论