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

Question

[Влад]

Вопрос простой, но я не могу найти на него ответ.
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 не отображается.

Comments

[Максим]

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

[Влад]

Максим, я создавал изображение в CorelDraw, присвоил слоям id и он сам мне нагенерил ещё и группы типа
<g style="clip-path:url(#id0)">
и т.д. Это весь код и никаких #id0 и т.д. не существует и, если убрать теги этих групп и оставить только <image />, то ничего не изменится.
Доберусь до компа и попробую вариант с base64 от IvanU7n. Или есть ещё какие-то варианты?

[Максим]

Влад, есть вариант с clippath css

[Максим]

Влад, или маска в css

[Влад]

Максим, можно поподробнее, пожалуйста? Если не сложно, то напишите пример и дайте ссылку на то, где об этом почитать.

Answer 1

[Ivan Ustûžanin]

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

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

Comments

[Влад]

У меня там анимация с включёнными в SVG растровыми изображениями. В векторную графику их никак не перекинешь.

[Ivan Ustûžanin]

Влад, всегда есть data-ссылки, такое разрешается, но svg увеличится

[Влад]

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

[Ivan Ustûžanin]

Влад, я говорил не про data-атрибуты, а про data-ссылки

например

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

[Влад]

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

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

[Ivan Ustûžanin]

Влад, ищите что ещё не так в SVG, т.к. простой пример отлично работает и в Хроме, и в Safari: https://node3.pnholding.com/svg-test/

[Влад]

IvanU7n, в вашем примере svg-файл в ставлен в html-документ, а в моём случае svg-изображение представлено в виде XML-кода, вставленного в HTML-документ. Поэтому в вашем случае это работает, а в моём случае нет несмотря на то, что я в в заголовках добавил:

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

[Ivan Ustûžanin]

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

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

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

[Влад]

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

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

ни вот этот

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

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

[Ivan Ustûžanin]

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

[Влад]

IvanU7n,

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

Answer 2

[mayton2019]

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

Comments

[Влад]

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

[mayton2019]

Влад, а ну ОК