Svg элемент изображения не отображается в Safari

Браузер Safari (я тестирую под Windows), похоже, испытывает проблемы с отображением элемента Svg Image.

<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<img src="image.svg" />

</body>
</html>

А вот и содержание image.svg:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
      <rect x="50" y="50" width="100" height="100" style="fill:blue"></rect>
      <rect id="foo" x="50" y="150" width="500" height="500" style="fill:green"></rect>
     <image x="50" y="10" width="200" height="200" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="></image>
</svg>

Есть ли какое-либо решение или обходной путь, чтобы сделать эту работу в Safari?

Источник

8 ответов

Решение

Я думаю, что здесь есть две проблемы:

  1. Вы ничего не сказали о том, насколько велико ваше изображение SVG. Как правило, вы должны хотя бы включить viewBox атрибут в <svg> тег. Например:

    <svg width="250" height="250" viewBox="0 0 250 250" ... >

  2. Другая проблема заключается в том, что Safari не особенно хорош в рендеринге SVG. Тем не менее, это имеет тенденцию быть лучше, когда вы вставляете их с <iframe> или же <object> тег вместо использования <img>, Например:

    <object data="image.svg" type="image/svg+xml"></object>

    Также убедитесь, что ваш сервер доставляет SVG-контент с правильным типом MIME (Content-Type: image/svg+xml), так как это может вызвать проблемы тоже.

Так что попробуйте:

HTML источник:

<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<object data="image.svg" type="image/svg+xml"></object>
</body>
</html>

image.svg:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="250" height="250" viewBox="0 0 250 250"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
      <rect x="50" y="50" width="100" height="100" style="fill:blue"></rect>
      <rect id="foo" x="50" y="150" width="500" height="500" style="fill:green"></rect>
     <image x="50" y="10" width="200" height="200" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="></image>
</svg>
Источник

Для меня проблема заключалась в том, что я использовал href атрибут без проблем в Chrome. Для правильной работы в Safari вам необходимо использовать xlink:href, Иметь ввиду xlink:href устарела и заменяется href, Однако это еще не поддерживается в Safari.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/href

Источник

Обязательно поставьте свой <svg>тег с высотой, шириной и полем просмотра, например. Safari не любит, когда высота или ширина установлены на autoпо какой-то причине. ⤵︎

      <svg height="16px" width="16px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M60......"></path></svg>
Источник

Я обнаружил эту же проблему, когда проверял приложение, над которым работал, в Safari, после того, как большую часть времени использовал Chrome. Я написал этот фрагмент кода TypeScript/jQuery (достаточно легко превращенный в простой JavaScript), чтобы решить эту проблему:

export function setSvgHref(elem: JQuery, href: string) {
  elem.attr('href', href);

  if (isSafari()) {
    elem.each(function() {
      this.setAttributeNS('http://www.w3.org/1999/xlink', 'href', href);
    });
  }
}
Источник

В моем случае проблема была связана с <mask>теги в. Я удалил следующую строку в своем svg компонент, и он начал работать в Safari.

      <mask id="y9iogdw0wd" fill="#fff">
    <use xlink:href="#jz8vxv0q6c"/>
</mask>
Источник

У меня возникла проблема со словесным знаком (текстом, который я использую в качестве логотипа), который я сохранил как файл.svg. Это было на моей странице с<img src="...svg">но не отображался должным образом в Safari (текущая версия по состоянию на июль 2020 г.). SVG отлично работал с FireFox, Chrome и Brave.

Я создал SVG в Inkscape. Я выделил весь объект, затем использовал Path -> Object to Path... и сохранил полученный файл.

Это правильно отображается во всех четырех браузерах. (Я пишу это здесь, если у меня снова возникнет эта проблема: он скажет мне, что я сделал, чтобы ее исправить.)

Источник

Для современного Safari 15.6.1 (настольный компьютер) он будет отображаться без каких-либо атрибутов, еслиheightиwidthОБА определены для чего-то иного, чемauto(по умолчанию).

      <svg height="48" width="48">...</svg>

ОДНАКО , чтобы обеспечить правильное масштабирование и возможность изменения размера с помощью CSS, лучше использовать соотношение viewBox и позволить CSS делать то, что он делает лучше всего (и да, из-за Safari вам все равно нужно определить ширину и высоту):

      <svg viewBox="0 0 48 48">...</svg>

      svg {
  width: 96px;
  height: 96px;
}
Источник

У меня была эта проблема с SVG из Figma : мое решение -> перетащите сломанный SVG в новый пустой файл Figma и повторно экспортируйте его как SVG

Теперь он должен работать и даже правильно отображаться в Finder QuickLook на MacOS.

-

Вы также можете импортировать его в AI и повторно экспортировать как SVG для того же результата.

Ваше здоровье!

Источник
Другие вопросы по тегам