Почему SVG с вложенным PNG внутри не отображается в Safari?

Вопрос простой, но я не могу найти на него ответ.
SVG отображается везде кроме Safari.
Вот SVG:

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 1600 1050"  xmlns:xlink="http://www.w3.org/1999/xlink">  <defs>   <style type="text/css">    <![CDATA[     .fil0 {fill:#86776F}     .fil1 {fill:#FEFEFE;fill-rule:nonzero}    ]]>   </style>  </defs>  <g id="turbocharger">   <metadata id="CorelCorpID_0Corel-Layer"/>   <g style="clip-path:url(#id0)">    <image id="turbo_bg" x="64.88" y="138.17" width="1436.25" height="791.66" xlink:href="/img/turbocharger/turbo_charger.png"/>   </g>   <g style="clip-path:url(#id1)">    <image id="turbo_fire" x="56" y="212.69" width="723" height="387" xlink:href="/img/turbocharger/turbo_fire.png"/>   </g>     <g style="clip-path:url(#id2)">    <image id="turbo_banknote" x="782.74" y="348.04" width="416" height="199" xlink:href="/img/turbocharger/turbo_2000.png"/>   </g>   <g style="clip-path:url(#id3)">    <image id="turbo_charger" x="0" y="0" width="1600" height="1050" xlink:href="/img/turbocharger/turbo_charger.png"/>   </g>   <path id="push_text" class="fil0" d="M454.37 etc."/>   <g id="turbo_exhaust">     <path id="turbo_exhaust-short" class="fil0" d="M1198.8 99.6c-0.71,-7.71 5.29,-13.23 9.42,-18.93 -3.36,17.64 -2.42,35.89 2.9,53.08 5.77,19.96 11.87,43.18 -0.61,62.02 5.83,-33.06 -11.87,-63.57 -11.71,-96.17l0 0z"/>     <path id="turbo_exhaust-long" class="fil0" d="M1237.31 115.01c13.28,28.9 25.96,63.18 12.99,94.43 -6.48,18.32 -24.83,28.83 -31.67,46.95 -5.28,10.07 -2.48,21.55 0.26,31.93 -8.7,-11.64 -15.32,-26.7 -8.8,-41.02 6.93,-26.38 33.64,-43.79 34.47,-72.14 1.36,-20.35 -4.54,-40.15 -7.25,-60.15l0 0z"/>    </g>   <g style="clip-path:url(#id4)">    <image id="turbo_propeller" x="1151.22" y="543.1" width="227" height="227" xlink:href="/img/turbocharger/turbo_propeller.png"/>   </g>  </g> </svg>

Я исправил `href` на `xlink:href`.
В добавил строку:

<meta http-equiv="Content-Type" content="application/xhtml+xml">

И всё равно в Safari не отображается.

Дополнительно:

Вы делаете clipPath а сами формы для обрезания где ?
В общем вы показали ни весь код

ЕМНИП по соображениями безопасности, если svg вставлен через неинтерактивный контекст (типа <img> или background-image:), то этот самый svg должен быть self-contained, т.е. не должен зависеть от внешних источников

где про это почитать не знаю, но помню, что при чтении в багзиле webkit-а обсуждения фикса для какого-то связанного с svg бага встретил упоминание про такое поведение

• У меня там анимация с включёнными в SVG растровыми изображениями. В векторную графику их никак не перекинешь.
• Влад, всегда есть data-ссылки, такое разрешается, но svg увеличится
• IvanU7n, не понял по поводу data. А как я с помощью пользовательских атрибутов смогу включить растровые изображения в svg-файл? Мне что джаваскриптом нужно будет data-атрибут преобразовывать в атрибут html-тегаl и присваивать его тегу? С примером можно поподробнее?
• Влад, я говорил не про data-атрибуты, а про data-ссылки

  например

  <image href="data:image/png;base64,(данные png в base64)"/>

  &lt;image href="data:image/png;base64,(данные png в base64)"/&gt;

• IvanU7n, Протестил ваш вариант. Всё равно не отображается в Safari.

  <image id="turbo_fire" x="66" y="212.69" width="723" height="387" xlink:href="data:image/png;base64,iVBORw0KG... />

  &lt;image id="turbo_fire" x="66" y="212.69" width="723" height="387" xlink:href="data:image/png;base64,iVBORw0KG... /&gt;

• Влад, ищите что ещё не так в SVG, т.к. простой пример отлично работает и в Хроме, и в Safari: https://node3.pnholding.com/svg-test/
• IvanU7n, в вашем примере svg-файл в ставлен в html-документ, а в моём случае svg-изображение представлено в виде XML-кода, вставленного в HTML-документ. Поэтому в вашем случае это работает, а в моём случае нет несмотря на то, что я в в заголовках добавил:

  <meta http-equiv="Content-Type" content="application/xhtml+xml">

  &lt;meta http-equiv="Content-Type" content="application/xhtml+xml"&gt;

• Влад, добавил второй тест со встроенным в html svg, в таком случае использование внешних ресурсов не должно быть проблемой, что собственно и показывает тест

  думаю нужно пробовать "оптимизировать" код svg, убирая из него всё лишнее, вполне может быть Safari что-то не нравится

  кстати, а другие элементы, не картинки, из svg в Safari отображаются или svg вообще не отображается в Safari?

• IvanU7n, Кстати, да.
  Ни вот этот

  <path id="push_text" class="fil0" d="M454.37 и так далее..."/>

  &lt;path id="push_text" class="fil0" d="M454.37 и так далее..."/&gt;

  ни вот этот

  <g id="turbo_exhaust"> <path id="turbo_exhaust-short" class="fil0" d="M1198.8 99.6c-0.71,-7.71 5.29,-13.23 9.42,-18.93 -3.36,17.64 -2.42,35.89 2.9,53.08 5.77,19.96 11.87,43.18 -0.61,62.02 5.83,-33.06 -11.87,-63.57 -11.71,-96.17l0 0z"/> <path id="turbo_exhaust-long" class="fil0" d="M1237.31 115.01c13.28,28.9 25.96,63.18 12.99,94.43 -6.48,18.32 -24.83,28.83 -31.67,46.95 -5.28,10.07 -2.48,21.55 0.26,31.93 -8.7,-11.64 -15.32,-26.7 -8.8,-41.02 6.93,-26.38 33.64,-43.79 34.47,-72.14 1.36,-20.35 -4.54,-40.15 -7.25,-60.15l0 0z"/> </g>

  &lt;g id="turbo_exhaust"&gt; &lt;path id="turbo_exhaust-short" class="fil0" d="M1198.8 99.6c-0.71,-7.71 5.29,-13.23 9.42,-18.93 -3.36,17.64 -2.42,35.89 2.9,53.08 5.77,19.96 11.87,43.18 -0.61,62.02 5.83,-33.06 -11.87,-63.57 -11.71,-96.17l0 0z"/&gt; &lt;path id="turbo_exhaust-long" class="fil0" d="M1237.31 115.01c13.28,28.9 25.96,63.18 12.99,94.43 -6.48,18.32 -24.83,28.83 -31.67,46.95 -5.28,10.07 -2.48,21.55 0.26,31.93 -8.7,-11.64 -15.32,-26.7 -8.8,-41.02 6.93,-26.38 33.64,-43.79 34.47,-72.14 1.36,-20.35 -4.54,-40.15 -7.25,-60.15l0 0z"/&gt; &lt;/g&gt;

  участки кода НЕ ОТОБРАЖАЮТСЯ!

• Влад, тогда скорее всего в проблема совсем в другом — для Safari в некоторых контекстах (вроде гридов и флексов) нужно, чтобы у элемента svg была задана хотя бы ширина при имеющемся viewBox, обычно svg { width: 100%; } в css хватает
• IvanU7n,

  Точняк! Я верстал на гридах!
  svg { width: 100%; }
  И больше ничего не нужно! И даже без линков base64 всё работает на ура!
  Блин, как всегда затык в самом элементарном.
  Спасибо тебе человечище! ))

Ответы:

Можно png преобразвать в векторную картинку. И будет такая нативная интеграция. SVG внутри SVG.

• Это через одно место получится. Там фотографические изображения – пикселей очень много.
• Влад, а ну ОК