SVG не отображается в теге img в Safari

проще говоря, у меня есть SVG-графика, встроенная в HTML, которая отказывается отображаться в Safari (хотя она отлично работает в Chrome, Firefox и других браузерах).

для этого я использую следующую разметку:

<img alt="grapefruit logo" src="/assets/better-gf-logo_red.svg" />

вот живая ссылка на страницу, где SVG не отображается. Логотип fruit в верхнем левом углу не отображается в Safari:https://grapefruit.cs.rpi.edu/.

Я проверил, что следующая строка также присутствует в моем nginx mime.types:

 image/svg+xml                         svg svgz;

однако я знаю, что проблема, вероятно, не связана с типами mime, так как SVG не отображается в Safari на моей машине разработки (я тестировал несколько веб-серверов). Я также попытался отобразить сам файл SVG в Safari, и это выглядит нормально. Элемент image имеет правильный размер и модель коробки, но не отображает никакого содержимого.

7
css html safari svg

2 ответов

получается, что <img src="image.svg"> не будет работать в Safari, я попытался с помощью <object> и это сработало. Попробуйте это:демо jsBin

<object
   type="image/svg+xml"
   height="70"
   width="150"
   data="/assets/better-gf-logo_red.svg">
</object>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object

14

прежде всего ваше изображение не SVG
вы можете открыть его в текстовом редакторе и увидеть - это PNG (не вектор), сохраненный только как SVG

... width="1640" height="422" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA...

проверьте здесь http://jsbin.com/kayiwe/

2