伏龙阁资源网

微信小程序里使用SVG矢量图标方法详解
站长资源 2024/11/22 佚名
2 0

在微信小程序开发过程中需要在小程序里使用SVG矢量图标，至于为什么要使用SVG图标相信看到这篇文章的你应该明白，如果你不明白请百度一下

微信小程序里使用SVG矢量图标有2种引入方法：

一、SVG图标转换为BASE64编码

使用 http://tools.jb51.net/transcoding/img2base64 工具把需要引入的SVG图标转换成BASE64编码

 微信小程序里使用SVG矢量图标方法详解

注意：生成BASE64编码时需要把开头的 data:image/svg; 修改成 data:image/svg+xml; 这个在线工具的问题，使用其它在线BASE64编码功能时大家一定要注意

复制转换后的编码至wxss文件中相应的 background-image:url("SVG图标BASE64编码") 中，如下代码

.svg{background:url("data:svg+xml;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAACMCAIAAAAhotZpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+2T3kLSMg8LC1QJzR/Dv3t/jrmSE9K/tTuKTbVJF1LQ93QcQG6L6nPEkWqECzSEhhiahTSNGLN0KKH4yG1CDLmhCN8EMskTdhAEXqaofsy9LWqNOCmeEgtgJRZZOF4EA0DlnSoC642kfxdQ+o+S1IOeURyXlRtSxVlJN3Ykve1Eaqwyvs2WuhQYC8Sq7nVDhYb6QhzJlL9rxkltKKokZKLdEhHB8l8OdRUNG6qsQ9sclBHkZ6k7Ojc0jJaSfLqYCG+g3h1E99dDnm+P2oJetK2VLClE7LNtigHIBZI8mpOiGb0EebGhojVQl1xj5FXRSITP8YpRBpYFhiOKJlgJq9oKs3xhA+kB5UvppaOxhxJ0zGxMxDMkDSTZkiaIWkmRUn6fwEGAE2xLmu6HJtTAAAAAElFTkSuQmCC");
width:100rpx;
height:100rpx;
background-size: contain
}

同时还需要添加 background-size: contain 属性使图标能根据元素大小自动缩放

然后在wxss对应的wxml文件中添加

 <view class="svg">
 </view>

编译后的效果

 微信小程序里使用SVG矢量图标方法详解

二、使用运程地址引入SVG图标

把SVG图标上传到网站服务器上，在浏览器中输入SVG图标地址测试是否能正常打开

 微信小程序里使用SVG矢量图标方法详解

复制SVG图标地址到  background-image:url(SVG图标URL地址) 如下

.svg{background:url(http://mt.com/coding.svg);
 width:100rpx;
 height:100rpx;
}

 编译后的效果

 微信小程序里使用SVG矢量图标方法详解

总结：

第一种方法直接把SVG图标BASE64编码放到WXSS文件内，这样做会大大增加微信小程序的体积，如果要更换图标还需要重新编译上传，不推荐

第二种方法相比第一种方法不会增加小程序的体积，需要更换图标时上传到服务器即可，非常灵活，推荐使用第二种方法

更多微信小程序开发文章请点击下方相关文章查阅

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接