微信小程序里引入SVG矢量图标的方法

引言

因为微信小程序的限制，引入外部图片或者矢量图，只能通过设置背景图片background-image : url("base64转码后的代码");的方式来进行操作。同时还是因为微信小程序的限制，我们要先把svg的xml编码转码为base64编码

首先，说明以下我们常见的svg矢量图是什么？下面引用百度百科的话：

svg是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式

可能还是比较迷糊，那我们来看看，用记事本打开一个svg，里面的编码是什么：

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg
t="1532946882675" class="icon" style="" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="826"
xmlns:xlink="http://www.w3.org/1999/xlink" width="200"
height="200"><defs><style type="text/css"></style></defs><path d="M914.75
466.75L832 384V256a64.19 64.19 0 0 0-64-64H640l-82.75-82.75a64.19 64.19 0 0
0-90.51 0L384 192H256a64.19 64.19 0 0 0-64 64v128l-82.75 82.75a64.19 64.19 0
0 0 0 90.51L192 640v128a64.19 64.19 0 0 0 64 64h128l82.75 82.75a64.19 64.19 0
0 0 90.51 0L640 832h128a64.19 64.19 0 0 0 64-64V640l82.75-82.75a64.19 64.19 0
0 0 0-90.5zM512 736L320 384h96l96 192 96-192h96z" p-id="827"
fill="#F36778"></path></svg>

好了，你看到了<?xml/svg11.dtd，那我们就明白了，这是一种由特定的DTD约束的xml文件，www标准组织定义了这个标准或者说约束，来描述定义svg，所以我们可以知道svg其实就是xml的一个小子集。

步骤好了，下面介绍一个网站，用来将xml文件编码转码为base64编码：https://www.sojson.com/image2base64.html

1、在↑的网站的选择组件中选择需要转换的svg，然后在网站下面的转换框中复制转换成功的base64格式的代码

2、将复制后的代码粘贴到this=> [background-image : url("this")]，然后对应的view或者text中加入样式即可

WXSS

WXML

效果图

PS顺便安利一下这个网站，虽然界面不怎么美观，但是功能确实良心，作为前端开发的辅助工具网站还是蛮OK滴~做个引流😜

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

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

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

    在微信小程序开发过程中需要在小程序里使用SVG矢量图标,至于为什么要使用SVG图标相信看到这篇文章的你应该明白,如果你不明白请百度一下 微信小程序里使用SVG矢量图标有2种引入方法: 一.SVG图标转换为BASE64编码 使用 http://tools.jb51.net/transcoding/img2base64 工具把需要引入的SVG图标转换成BASE64编码 注意:生成BASE64编码时需要把开头的 data:image/svg; 修改成 data:image/svg+xml; 这个在线工

  • 微信小程序里引入SVG矢量图标的方法

    引言 因为微信小程序的限制,引入外部图片或者矢量图,只能通过设置背景图片background-image : url("base64转码后的代码");的方式来进行操作.同时还是因为微信小程序的限制,我们要先把svg的xml编码转码为base64编码 首先,说明以下我们常见的svg矢量图是什么?下面引用百度百科的话: svg是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式 可能还是比较迷糊,那我们来看看,用记事本打开一个svg,里面的编码是什么: <

  • 在微信小程序里使用watch和computed的方法

    在开发 vue 的时候,我们可以使用 watch 和 computed 很方便的检测数据的变化,从而做出相应的改变,但是在小程序里,只能在数据改变时手动触发 this.setData() ,那么如何给小程序也加上这两个功能呢? 我们知道在 vue 里是通过 Object.defineProperty 来实现数据变化检测的,给该变量的 setter 里注入所有的绑定操作,就可以在该变量变化时带动其它数据的变化.那么是不是可以把这种方法运用在小程序上呢? 实际上,在小程序里实现要比 vue 里简单,

  • 详解如何愉快的在微信小程序中使用SVG图标

    SVG近几年因各种优势被大量的应用,遗憾的是到目前为止微信小程序并不支持以XML的形式使用SVG,这使得SVG的灵活性大大下降,大多数人选择放弃在微信小程序中使用SVG图标方案. 那么,真的就没有办法在微信小程序中愉快的使用SVG图标了吗?我们先来分析一下,对于使用SVG图标我们有哪些需求: 能够引入使用 能够调整颜色 首先第一点是没有问题的,微信小程序支持以Image.src的形式引入SVG.接下来就是本文的重点部分了,如何让使Image形式的SVG可以改变颜色. 在最近对CSS的学习中,我发

  • 微信小程序实现可拖动悬浮图标(包括按钮角标的实现)

    微信小程序实现可拖动悬浮图标(包括按钮角标的实现)

    在制作商城类微信小程序的过程中,我们经常会碰到需要增加可拖动悬浮图标的情况,本文简单的介绍一下可拖动悬浮按钮的实现. 运行截图: 主要代码: js: var startPoint Page({ data: { //按钮位置参数 buttonTop: 0, buttonLeft: 0, windowHeight: '', windowWidth: '', //角标显示数字 corner_data:0, }, onLoad:function(){ //定义角标数字 this.setData({ co

  • 微信小程序实现自定义加载图标功能

    效果图 实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方形的宽高以及定位(注意:此处需要将长方形的旋转中心点移动到长方形的右侧边终点,方便后期以该点旋转.): 3.通过长方形盒子的伪元素,设置显示的长方形背景和宽高,同时进行定位. 4.由于在第二步的时候,已经将旋转中心移动,此处我们直接对每一个盒子中长方形进行旋转(注意:旋转角度 = 360 / 盒子中

  • 微信小程序里长按识别二维码的实现过程

    微信小程序里长按识别二维码的实现过程

    前言 我们都知道公众号里的二维码可以长按识别,但是小程序限制比较严格,没有办法实现二维码的长按识别,一直以来我都是这样认为的,微信的官方规则里也是这么写的,直到今天上午,我无意间发现一个小程序里的二维码居然可以长按识别,于是就好奇的去研究了一番,结果还真的可以实现小程序里长按识别二维码.不知道是官方的漏洞还是程序的bug,但是既然这个功能可以实现,那当然要愉快的用上一用啦 老规矩,先看效果图 可以看到,我们成功的在小程序里实现了长按识别二维码的功能.下面就教大家如何一步步实现吧.因为官方的规格还

  • 微信小程序中显示html格式内容的方法

    微信小程序中显示html格式内容的方法

    前言 最近项目上遇到在微信小程序里需要显示新闻内容,新闻内容是通过接口读取的服务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过wxParse来实现. 准备工作: 首先我们下载wxParse github地址:https://github.com/icindy/wxParse 本地下载:http://xiazai.jb51.net/201704/yuanma/wxParse-master(jb51.net).rar wx

  • 微信小程序实现自定义modal弹窗封装的方法

    微信小程序实现自定义modal弹窗封装的方法

    前言 小程序官方提供了 wx.showModal 方法,但样式比较固定,不能满足多元化需求,自定义势在必行~ 老规矩先上图 点击某个按钮,弹出 modal框,里面的内容可以自定义,可以是简单的文字提示,也可以输入框等复杂布局.操作完点击取消或确定关闭 modal. 如何使用 将下面的 modal.wxml .modal.wxss .modal.js .modal.json 四个文件复制到对应位置即可. 封装完之后调用起来也很简单,看看调用的代码吧 <modal show="{{showMo

  • 微信小程序利用co处理异步流程的方法教程

    微信小程序利用co处理异步流程的方法教程

    本文主要介绍的是关于微信小程序利用co处理异步流程的方法教程,分享出来供大家参考学习,需要的朋友们下面来看看详细的介绍: co co是一个基于ES6 Generator特性实现的[异步流程同步化]写法的工具库. co需要使用Promise特性,所以,我们先来创建一个使用Promise来处理的异步方法: function myAsyncFunc() { return new Promise(function (resolve, reject) { setTimeout(function () {

随机推荐