SVG изображения отображаются только в браузере

Question

У меня есть файлы SVG, которые сгенерированы программно с помощью Raphael.js. Выход Raphael записывается в фактический файл с использованием PHP. SVG содержат изображение, встроенное в кодированные данные Base64. Файлы выглядит следующим образом:

<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> 

Вот один пример файла: http://www.mybinaryromance.com/files/0.218636001483456524.svg

Изображения отображаются корректно в браузерах (тестируемых Firefox и Chromium на Ubuntu), однако, в других приложениях (Ubuntu для просмотра изображений, GIMP, TCPDF ...) SVG отображается пустым. Почему это происходит?

Answer 1

Попробуйте удалить пробел после data:. Спецификация синтаксиса URI специально запрещает пробелы в URI. См. Раздел 2.4.3 от https://tools.ietf.org/html/rfc2396

Возможно, браузеры снисходительны, но эти другие программы не являются.

Если это ничего не меняет, может быть просто, что эти программы не поддерживают URI данных в SVG <image>.