SVG для изображений в браузерах с PNG откат

Question

Я хочу использовать SVG-версии логотипа компании на веб-сайте. В настоящее время все текущие версии основных браузеров (IE, Safari, Chrome, Firefox, Opera) поддерживают SVG, так что это не кажется сумасшедшим. Однако старые браузеры все еще существуют, поэтому мне нужно вернуться к поддержке PNG.

Очевидное решение - поместить содержимое SVG в тег object следующим образом (простите встроенные стили ...):

<object data='logo.svg' style='height:3em' >
    <img src='logo.png' style='height:3em' />
</object>

Который в теории должен отображать object, если это возможно, или иначе отображать img. Тем не менее, Chrome это не нравится, и он применяет стиль height к самому объекту, но не к SVG, поэтому я получаю небольшую рамку, похожую на iframe, с полосами прокрутки и огромным логотипом.

Другим решением было бы использовать PNG в качестве источника img, а затем заменить его во время рендеринга на источник SVG с javascript, если я думаю, что я работаю в браузере с поддержкой SVG. Это не идеально, потому что PNG все равно будет загружен, и я не уверен, что могу правильно определить поддержку SVG. К сожалению, jQuery, похоже, не имеет функции обнаружения SVG.

Наконец, поскольку мой веб-сайт развернут с помощью ASP.NET, я мог бы проверить строку пользовательского агента перед обслуживанием страницы и указать источник img в зависимости от того, думаю ли он, что он будет поддерживать SVG. Но у этого также есть потенциальная проблема, что я не доверяю, я могу сделать правильный звонок.

Каков предпочтительный способ выполнения SVG для изображений?

Answer 1

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

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

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

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

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

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

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

Answer 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, это кажется большой работой.

Answer 3

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

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

Кстати, здесь я использую элемент 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 </li>
• SVG для всех остальных, поддерживающих SVG
• Android 2.x не будет иметь PNG или SVG, поскольку эти версии фактически поддерживают несколько фонов, но не SVG
• Для браузеров, поддерживающих SVG
• PNG для IE <10, FF <3,6, Safari <4,0, Opera <11,1, Opera Mini, Opera Mobile <11,1 </li>
• 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);
}

Answer 4

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

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

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

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

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

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

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

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

Другойхороший ресурс: http://www.schepers.cc/svg/blendups/embedding.html

Answer 5

Лучший метод, который я нашел, включая 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

Answer 6

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