Подтвердить что ты не робот

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

Я хочу использовать 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 для изображений?

4b9b3361

ОТВЕТЫ

Ответ 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