微信小程序中引入SVG矢量Logo的方法

序

由于微信小程序的限制，只能通过设置背景图片background-image : URL(' base64转码代码')来进行外部图片或矢量图片的引入；操作方法。同时，由于微信小程序的限制，我们必须先将svg的xml编码转码为base64编码

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

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

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

？xml版本='1.0 '独立='否'？DOCTYPE SVG PUBLIC '-//W3C//DTD SVG 1.1//EN ' ' http://www . w3 . org/Graphics/SVG/1.1/DTD/SVG 11 . DTD ' SVG t=' 1532946882675 ' class=' icon ' style=' viewBox=' 0 0 1024 1024 ' version=' 1.1 ' xmlns=' 3358 www . w3 . org/2000/SVG '好吧，你看？Xml/svg11。dtd，那么我们可以理解这是一个受特定DTD约束的xml文件。www标准组织定义了这个标准或约束来描述和定义svg，所以我们可以知道svg实际上是XML的一个小子集。

步骤很好。这是一个将xml文件转码为base64编码的网站：https://www.sojson.com/image2base64.html

1.从网站的选择组件中选择要转换的svg，然后在网站下方的转换框中复制base64格式的转换成功的代码。

2.将复制的代码粘贴到此=[背景图像： URL ('this')]中，然后将样式添加到相应的视图或文本中

页面样式表

WXML

翻译

PS，顺便安利看一下这个网站。虽然界面不是很美观，但功能真的很良心。作为前端开发的辅助工具，网站还是挺OK的~做个引流

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