SVG 嵌入图像仅在浏览器中显示

Posted 2023-03-28

【中文标题】SVG 嵌入图像仅在浏览器中显示

【英文标题】：SVG embedded image displays in Browser ONLY

【发布时间】：2017-05-18 13:09:38

【问题描述】：

我有使用 Raphael.js 以编程方式生成的 SVG 文件。 Raphael 输出使用 php 写入实际文件。 SVG 包含嵌入为 Base64 编码数据的图像。文件如下所示：

<svg  version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative; top: -0.583008px;" viewBox="0 0 740 644" preserveAspectRatio="xMidYMid meet">
<image x="185" y="161"   preserveAspectRatio="none" xlink:href="data: image/png;base64,iVBORw [-- lots of Base64-Data --] ==" transform="matrix(1.3696,-0.3064,0.3064,1.3696,-391.7711,-44.4982)" style="" stroke-></image>
<desc>Created with Raphaël 2.2.0</desc>
<defs></defs>
</svg>

这是一个示例文件：http://www.mybinaryromance.com/files/0.218636001483456524.svg

图像在浏览器中正确显示（在 Ubuntu 上测试 Firefox 和 Chromium），但是在其他应用程序（Ubuntu 图像查看器、GIMP、TCPDF...）中，SVG 显示为空。为什么会这样？

【参考方案1】：

尝试删除data: 后面的空格。 URI 语法规范明确禁止在 URI 中使用空格。请参阅https://www.rfc-editor.org/rfc/rfc2396 的第 2.4.3 节

可能是浏览器很宽松，但其他程序没有。

如果这没有任何改变，那么可能只是这些程序不支持 SVG <image>s 中的数据 URI。