前言
小程序的组件中是没有支持SVG
标签的。
但是在前端小伙伴的实际开发中,UED经常提供SVG图片过来,如果不想用引入iconfont
的话,那么妹子我将介绍个很好用的方法。
SVG 简介
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
- SVG 与JPEG和GIF图像比起来,尺寸更小,且可压缩性更强。
- 适合各种icon和图标
去除 SVG 中不需要的代码
我们知道 SVG
实际是由代码组成,可以将 SVG
图片直接用IDE打开(如sublime),可以查看并修改其颜色形状大小。
其中有很多 SVG
代码我们可以去除,如注释、多余空格等等,可以用网站 https://jakearchibald.github.io/svgomg,来精简SVG:
将 SVG 转化成Base64
打开网站https://www.sojson.com/image2base64.html来转Base64
接着在WXSS和WXML中使用
// Base64 在CSS中的使用
.box{
background-image: url("刚刚转的Base64");
}
// Base64 在HTML中的使用
<img src="data:image/jpg;base64,/9j/4QMZR..." />
小程序中引用完成
Happy coding .. :)