小程序加载svg图片

前言

小程序的组件中是没有支持SVG标签的。
但是在前端小伙伴的实际开发中,UED经常提供SVG图片过来,如果不想用引入iconfont的话,那么妹子我将介绍个很好用的方法。

SVG 简介

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  • SVG 与JPEG和GIF图像比起来,尺寸更小,且可压缩性更强。
  • 适合各种icon和图标

去除 SVG 中不需要的代码

我们知道 SVG 实际是由代码组成,可以将 SVG 图片直接用IDE打开(如sublime),可以查看并修改其颜色形状大小。

sublime

其中有很多 SVG 代码我们可以去除,如注释、多余空格等等,可以用网站 https://jakearchibald.github.io/svgomg,来精简SVG:

image.png

将 SVG 转化成Base64

打开网站https://www.sojson.com/image2base64.html来转Base64

image.png

接着在WXSS和WXML中使用

// Base64 在CSS中的使用
.box{
  background-image: url("刚刚转的Base64");
}
// Base64 在HTML中的使用
<img src="data:image/jpg;base64,/9j/4QMZR..." />

小程序中引用完成

image.png

参考资料

Happy coding .. :)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 15,726评论 2 45
  • 中午一个人去餐馆吃饭,报了菜名在等待上菜的时候,习惯性的到包里掏手机,掏空方记起手机忘单位了。抬头看其他等餐的人,...
    关中人阅读 2,515评论 0 0
  • 最近重新听了下得到上面的一门精品课:成为解决问题的高手。而所有的问题,大家都可以用里面所说的方法来解决。 我就举个...
    海饼干去哪儿阅读 3,749评论 0 0
  • 周末,闲着没事,到书店翻翻书。 <1> 我所处的城市不大,像样的实体书店并不多。特别是互联网高速发达的今天,估计实...
    紫金传奇阅读 4,189评论 0 0