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

Question

I have SVG files that are generated programmatically using Raphael.js. The Raphael output is written to the actual file using PHP. The SVGs contain an image embedded as Base64 encoded data. The files looks like this:

<svg height="644" version="1.1" width="740" 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" width="370" height="370" 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-width="0.7125311771299471"></image>
<desc>Created with Raphaël 2.2.0</desc>
<defs></defs>
</svg>

Here is one example file: http://www.mybinaryromance.com/files/0.218636001483456524.svg

The images are correctly displayed in browsers (tested Firefox and Chromium on Ubuntu), however, in other applications (Ubuntu image viewer, GIMP, TCPDF...) the SVG is displayed empty. Why is that happening?

Answer 1

Try removing the space after data:. The URI syntax specification specifically disallows spaces in URIs. See section 2.4.3 of https://tools.ietf.org/html/rfc2396

It may be that browsers are being lenient, but those other programs aren't.

If that doesn't change anything, then it may just be that those programs do not support Data URIs in SVG <image>s.