博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
小程序加载svg图片
阅读量:6276 次
发布时间:2019-06-22

本文共 509 字,大约阅读时间需要 1 分钟。

前言

小程序的中是没有支持SVG标签的。

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

SVG 简介

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

去除 SVG 中不需要的代码

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

sublime

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

image.png

将 SVG 转化成Base64

打开网站来转Base64

image.png

接着在WXSS和WXML中使用

// Base64 在CSS中的使用.box{  background-image: url("刚刚转的Base64");}
// Base64 在HTML中的使用

小程序中引用完成

image.png

参考资料

Happy coding .. :)

转载地址:http://aagpa.baihongyu.com/

你可能感兴趣的文章
《第一桶金怎么赚——淘宝开店创业致富一册通》一一第1章 创业梦想,怎样起步...
查看>>
基于容器服务的持续集成与云端交付(三)- 从零搭建持续交付系统
查看>>
《算法基础:打开算法之门》一3.4 归并排序
查看>>
高德开放平台开放源代码 鼓励开发者创新
查看>>
《高并发Oracle数据库系统的架构与设计》一2.5 索引维护
查看>>
《Exchange Server 2010 SP1/SP2管理实践》——2.4 部署外部网络环境
查看>>
Firefox 是 Pwn2own 2014 上攻陷次数最多的浏览器
查看>>
阿里感悟(十八)- 应届生Review
查看>>
《计算广告:互联网商业变现的市场与技术》一第一部分 在线广告市场与背景...
查看>>
话说模式匹配(5) for表达式中的模式匹配
查看>>
《锋利的SQL(第2版)》——1.7 常用函数
查看>>
《Arduino家居安全系统构建实战》——1.5 介绍用于机器学习的F
查看>>
jquery中hover()的用法。简单粗暴
查看>>
线程管理(六)等待线程的终结
查看>>
spring boot集成mongodb最简单版
查看>>
DELL EqualLogic PS存储数据恢复全过程整理
查看>>
《Node.js入门经典》一2.3 安装模块
查看>>
《Java 开发从入门到精通》—— 2.5 技术解惑
查看>>
Linux 性能诊断 perf使用指南
查看>>
实操分享:看看小白我如何第一次搭建阿里云windows服务器(Tomcat+Mysql)
查看>>