SVG для изображений в браузерах с запаздыванием PNG

Ответ 1

Это старый вопрос, но вот еще одно решение:

• Загрузите версию Modernizr, которая была обрезана только для проверки SVG (предполагая, что это единственный тест, который вам нужен).

• Запустите тест. Если он пройдет, поместите в SVG. Если это не удается, поместите в растровое изображение. По существу:

  if (!Modernizr.svg) { 
      $("#logo").css("background-image", "url(fallback.png)"); 
  }
  

SVG - идеальный вариант использования Modernizr, потому что нет простого родного способа обеспечения резервной копии.

Примечание. Браузер не загружает обе версии (png и svg).

Для записи: единственная причина, по которой вам понадобится резервное копирование для SVG в эти дни, если вам нужно поддерживать IE 8 и более поздние версии, или более старые Android.

Ответ 2

Я бы не назвал это предпочтительным способом, но если вы хотите продолжить свой второй вариант, это должно обнаружить поддержку SVG (из Raphaël 1.5.2):

if(window.SVGAngle || 
    document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1") {
    // supports SVG
else {
    // no SVG
}

Raphaël использует это, чтобы определить, должен ли он отображаться с использованием VML (IE) или SVG (все остальные).

Из любопытства, почему SVG для вашего логотипа? Если у вас уже есть версия PNG, это похоже на большую работу.

Ответ 3

Чтобы решить вашу проблему, измените SVG в теге объекта:

Добавьте атрибуты "preserveAspectRatio" и "viewBox" в тег svg. Откройте файл в текстовом редакторе и найдите тег. в этом теге добавьте следующие атрибуты:

preserveAspectRatio="xMinYMin meet" viewBox="0 0 {width} {height}"

Замените {width} и ​​{height} на некоторые значения по умолчанию для viewBox. Я использую значения из атрибутов "ширина" и "высота" тега SVG. Сохраните SVG, и теперь он должен масштабироваться, как ожидалось.

Смотрите: Как масштабировать упрямый SVG, встроенный с <object> тег?

Проблема w/SVG в теге объекта, однако заключается в том, что они проглатывают клики.

SVG в качестве фонового изображения с резервным копированием PNG: http://www.broken-links.com/2010/06/14/using-svg-in-backgrounds-with-png-fallback/

Моим любимым является использование тега img и обработчика onerror для изменения тега src в PNG.

Еще один хороший ресурс: http://www.schepers.cc/svg/blendups/embedding.html

Ответ 4

Единственное, что вам нужно - это CSS. Сначала вы объявляете резервное изображение как background-image. Затем вы можете использовать несколько фонов, чтобы добавить SVG.

IE8 и ниже будут игнорировать второй background-image -declaration, поскольку отсутствие поддержки нескольких фонов.

Кстати, я использую элемент img здесь, потому что логотип - это контент, а не макет. Использование фоновых изображений может показаться неправильным в этом контексте, но я не согласен. Вы получаете лучшее из миров: логотип SVG, резерв для

HTML:

<a href="/" class="site-logo">
    <!-- base64 encoded 1x1 px big transparent gif -->
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="company logo">
</a>

CSS (с использованием нескольких фоновых изображений):

caniuse: несколько фонов

• PNG для IE < 9, FF < 3,6, Opera < 10,5
• SVG для всех остальных, поддерживающих SVG
• Android 2.x не будет иметь PNG или SVG, из-за того, что эти версии поддерживают несколько фонов, но не SVG
• Существует только один HTTP-запрос для браузеров, поддерживающих SVG

.site-logo > img {
    /* Dimensions of your image need to be set */
    width: 32px;
    height: 32px;

    /* Fallback for <IE9 */
    background-image: url(logo.png);

    /* multiple backgrounds are ignored by <IE9 */
    background-image: url(logo.svg), none;
}

CSS (с использованием линейных градиентов):

caniuse: градиенты CSS

• PNG для IE < 10, FF < 3,6, Safari < 4.0, Opera < 11.1, Opera Mini, Opera Mobile < 11.1
• SVG для всех остальных, поддерживающих SVG (если указаны префиксы поставщика)
• Игнорирование старого синтаксиса градиента для webkit делает Android 2.x использовать резервную копию PNG

.site-logo > img {
    /* Dimensions of your image need to be set */
    width: 32px;
    height: 32px;

    background: transparent url(logo.png) center center no-repeat;
    background-image: -webkit-linear-gradient(transparent, transparent), url(logo.svg);
    background-image:         linear-gradient(transparent, transparent), url(logo.svg);
}

Ответ 5

Попробуйте svg-web, у них есть несколько различных способов отображения изображений svg, включая флеш с автоматическим резервным копированием.

Ответ 6

Лучший метод, который я нашел, включая SVG в качестве HTML-элемента (с резервным), следующий:

<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" style="width: 100px; height: 100px; vertical-align: top;">
    <image xlink:href="image.svg" src="fallback.png" width="100%" height="100%"/>
</svg> 

Плюсы:

• Обеспечивает резервное копирование в каждом тестируемом устройстве/браузере (IE6-IE11, Android 2.0+, IOS3-7)
• Загружается только одно изображение для каждого тестируемого браузера (кроме IE9-IE11)
• Внешне загруженные изображения позволяют кэшировать изображения

Минусы:

• Невозможно использовать в качестве масштабируемого (отзывчивого) изображения в IE9-IE11 (см. этот вопрос)
• IE9-IE11 загружает оба изображения
• IOS3-4 (Mobile Safari) поддерживает SVG, но отображает PNG (поскольку ему не хватает встроенной поддержки SVG)
• Файл SVG не должен иметь атрибуты высоты и ширины (не знаете об этом, но читали об этом где-то и в моих тестах у моего SVG их не было) в любом случае
• Не проверяет

Просьба представить комментарии с дополнительными плюсами/минусами, о которых вы можете думать. Я знаю, что для одного SVG может появляться пиксель в некоторых браузерах, но я не смог проверить масштабирование с помощью браузера для эмуляции.

Источник: http://lynn.ru/examples/svg/en.html