const value = 'test&a=1'
'http://www.baidu.com/s?word=' + encodeURIComponent(value)
encodeURIComponent(value)
encodeURI(value)
昨天研究 btoa 时，发现调用之前都会再执行一个转码的api （注：btoa 是转 base64 时用的，还有个跟它相反的 atob）window.btoa(unescape(encodeURIComponent(svgStr)))我测试了一个例子，发现 unescape(encodeURIComponent(svgStr)) 貌似会对字符串里面的中文进行转码中文字符转Unicode码function toUnicode(str){ return str.replace(/[^\u00
我们需要获取目标SVG：
var svg = document . querySelector ( 'svg' ) ;
比我们必须创建宽度和高度完全像我们要转换的svg的画布：
var canvas = document . createElement ( 'canvas' ) ;
canvas . width = svg . getBoundingClientRect ( ) . width ;
canvas . height = svg . getBoundingClientRect ( ) . height ;
body . appendChild ( canvas ) ;
...魔术来了：
XMLSerializer.serializeToSt
文章目录SVG 简介什么是SVGSVG有哪些优势SVG在小程序中的使用获取SVG资源获取对应SVG代码将SVG代码转码为Base64编码格式在具体代码中引用SVG展示效果
SVG 简介
什么是SVG
SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 使用 XML 格式定义图像。
它是可以用于描述静态图、动画，以及用户界面的一种图形格式。1999年由万维网联盟发布。于2013年成为W3C推荐标准。
SVG有哪些优势
SVG 可被非常多的工具读取和修改
SVG 与JPE
created() {
this.title = this.readFile("../../../static/images/雷达.svg");
console.log(this.title,"svg文件读取");
var newSvg=this.title.replace(/#(?:[0-9a-fA-F]{6})/, "#f1f1f1");
console.lo...
今天遇到一个项目中使用纯色图标的问题，用字体麻烦用图片low，所以就想直接用svg，毕竟只有一两个图标。
第一想法是用 DataURI，然后想到了之前 CSS-tricks 的文章，翻了下做下汇总：
不建议把 svg 转 base64 来用
base64 本身浏览器解码也会消耗一定的资源
svg 转 base64 后反而会变大
解决方案：
压缩 svg 文件，使用 SVGO 或者 SV...
需要将端上传过来的svg文件解析为字符串，然后再生成jpeg格式图片，再将图片转成Base64格式进行使用首先引入如下以来。版本一定按照这个来，高版本会出现各种类丢失的问题。
再就是工具类代码
可以看到生成了base64字符串
进行转化后能够复原出图片
转换链接：https://www.sojson.com/image2base64.html
2、使用两者区别
（1）使用一个63.8k的svg与使用转base64之后的两个文件
a、使用svg
b、使用base64
（2）使用一个225k的svg与使用转base64之后的两个文件
a、使用svg
b、使用base64
3、svg转base64有什么好处吗？
（1）减少http
EasyQRCodeJS-NodeJS
EasyQRCodeJS-NodeJS is a NodeJS server side javascript QRCode image(PNG/JPEG/SVG/Base64 data url) generator. Support setting Dot style, Logo, Background image, Colorful, Title and more. Support binary(hex) data mode.
EasyQRCodeJS-NodeJS 是一个 NodeJS 环境下的服务端 JavaScript QRCode 图片(PNG/JPEG/SVG/Base64 data url)生成模块。支持点状风格，Logo，背景图片，规则色彩控制，标题等设置。支持二进制数据模式。
Table of contents
EasyQRCode
随时随地将SVG转换为base64
如果像我一样，在开发时使用了大量的SVG，则可能已经到了需要将SVG用作背景图像或嵌入到javascript文件中的地步。 唯一的方法是将SVG文件转换为base64字符串，然后在需要时使用它。 该软件包正是这样做的-将SVG转换为base64。
该软件包可在浏览器和Node环境中使用。 请继续阅读以了解操作方法。
npm i svg64
yarn add svg64
只需下载此存储库并使用dist文件夹中的文件
或从unpkg.com取消设置
< script src =" https://unpkg.com/svg64 " > </ script >
在浏览器中：
// This is your SVG DOM element
const svg = document . getElementByI
// 找到页面上面的svg元素
const svg = document.getElementById('svg');
// 将整个 document 对象序列化为一个 XML 字符串
const s = new XMLSerializer().serializeToString(svg);
// 通过window.btoa() 方法用于创建一个 base-64 编码的字符串
function getBase64Image(img,width,height) {
var canvas = document.createElement("canvas");
canvas.width = width ? width : img.width;
canvas.h...
1. 安装SVG-Blob：`npm install svg-blob`
2. 在你的代码中引入SVG-Blob：`import { SVGBlob } from 'svg-blob'`
3. 使用SVGBlob类的toBlob()方法将SVG字符串转换为Blob对象：
const svgString = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><rect x="10" y="10" width="100" height="100" fill="red"/></svg>';
const blob = new SVGBlob(svgString);
const blobUrl = URL.createObjectURL(blob);
4. 最后，你可以使用HTML5的`download`属性下载Blob对象作为.svg图片：
const link = document.createElement('a');
link.download = 'my-image.svg';
link.href = blobUrl;
link.click();
这样，你就可以将SVG字符串保存为.svg图片了。
