JavaScript — встроенное изображение SVG отображается только в браузере
У меня есть файлы 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 отображается пустым. Почему это происходит?
Решение
Попробуйте удалить пробел после data:, Спецификация синтаксиса URI, в частности, запрещает использование пробелов в URI. Смотрите раздел 2.4.3 https://tools.ietf.org/html/rfc2396
Может случиться так, что браузеры снисходительны, но другие программы — нет.
Если это ничего не меняет, то может быть так, что эти программы не поддерживают URI данных в SVG <image>s.
Другие решения
Других решений пока нет …