javascript - 将 SVG 字符串转换为 base64

Question

我希望将 SVG 字符串转换为其 base64 格式，同时尽量避免创建元素节点。

这样做的目的是使用<a>标签创建一个可下载的链接

这是 SVG（示例）：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1500" height="1500" viewBox="0 0 1500 1500" xml:space="preserve">
<desc>Created with Fabric.js 3.6.3</desc>
<defs>
</defs>
<g transform="matrix(1 0 0 1 25.5 300.5)"  >
<rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;"  x="-25" y="-150" rx="0" ry="0" width="50" height="300" />
</g>
<g transform="matrix(1 0 0 1 50.5 50.5)"  >
<rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;"  x="-50" y="-50" rx="0" ry="0" width="100" height="100" />
</g>
<g transform="matrix(1 0 0 1 950.5 25.5)"  >
<rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;"  x="-550" y="-25" rx="0" ry="0" width="1100" height="50" />
</g>
<g transform="matrix(1 0 0 1 350.5 250.5)"  >
<circle style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;"  cx="0" cy="0" r="50" />
</g>
<g transform="matrix(1 0 0 1 700.5 1050.5)"  >
<rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;"  x="-50" y="-50" rx="0" ry="0" width="100" height="100" />
</g>
</svg>

标签： javascriptsvg

Answer 1

你可以使用URL.createObjectURL()

var svg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1500" height="1500" viewBox="0 0 1500 1500" xml:space="preserve"><desc>Created with Fabric.js 3.6.3</desc><defs></defs><g transform="matrix(1 0 0 1 25.5 300.5)"  ><rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;"  x="-25" y="-150" rx="0" ry="0" width="50" height="300" /></g><g transform="matrix(1 0 0 1 50.5 50.5)"  ><rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;"  x="-50" y="-50" rx="0" ry="0" width="100" height="100" /></g><g transform="matrix(1 0 0 1 950.5 25.5)"  ><rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;"  x="-550" y="-25" rx="0" ry="0" width="1100" height="50" /></g><g transform="matrix(1 0 0 1 350.5 250.5)"  ><circle style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;"  cx="0" cy="0" r="50" /></g><g transform="matrix(1 0 0 1 700.5 1050.5)"  ><rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;"  x="-50" y="-50" rx="0" ry="0" width="100" height="100" /></g></svg>`;
// convert svg to blob url
var url = URL.createObjectURL(new Blob([svg], {type:"image/svg+xml;charset=utf-8"}));
// add the url to the a.href
document.querySelector('#download').href = url;

<a id="download" download="mysvg.svg">download svg</a>