Base64 SVG 图像答案

【问题标题】：Base64 SVG imagesBase64 SVG 图像
【发布时间】：2014-11-22 13:51:34
【问题描述】：

我无法获取 SVG 的 base64 数据 URI 以显示为图像。

我尝试了<img> 和<canvas>，但都没有显示 SVG。

var url = 'data:image/svg+xml;base64,' + btoa('<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/></svg>');

document.getElementById('image').src = url;

var context = document.getElementById('canvas').getContext('2d');
var image = new Image();
image.src = url;
context.drawImage(image, 0, 0);

canvas, img {
    border: 1px solid black;
}

<img id="image" width="200" height="200">

<canvas id="canvas" width="200" height="200"></canvas>

在 Chrome 和 Firefox 中测试。

SVG 没有显示什么？

【问题讨论】：

标签： javascript image canvas svg base64

【解决方案1】：

当像这样嵌入svg时，记得为svg设置xmlns：

var url = 'data:image/svg+xml;base64,' + 
           btoa('<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/></svg>');

如果您的 svg 元素中使用了任何 xlink 前缀，您还应该添加 xmlns:xlink="http://www.w3.org/1999/xlink"

【讨论】：