Юрий Матюхин

Трюки с SVG и поддержка старыми браузерами

 

Раньше я не использовал SVG, поскольку рабочие проекты были с поддержкой Internet Explorer 6/7. Да и не требовалось поддержки ретины. Но сейчас, спустя время, настало время использовать SVG на полную.

Поддержка браузерами

На данный момент, SVG поддерживается всеми современными браузерами, начиная с Inernet Explorer 9 (CIU). По данным сайта Can I Use, SVG поддерживается в мире на 94.55% и на 83.13% в России. Самая главная проблема — это IE 8, доля которого все еще достаточно велика.

Fallback

У нас есть несколько вариантов использования SVG изображений в HTML странице:

  1. В теге img<img src="test.svg" alt="">
  2. Через CSS свойство background-imagebackground-image: url (test.svg)
  3. Вставить svg инлайн (не рассматривается в статье)</li>

Для первых двух способов есть очень изящные решения. Начнем со способа в котором мы используем тег img.

Использование SVG изображения через тег img

Вместо привычно кода, напишем в нашем HTML следующий код:

<svg width="100" height="100">
  <image xlink:href="test.svg" src="test.png" width="100" height="100"/>
</svg>

После обработки этого кода браузером, который поддерживает SVG, он проигнорирует атрибут src и покажет векторную картинку test.svg.

<svg width="96" height="96">
  <image xlink:href="test.svg" width="100" height="100"/>
</svg>

А браузеры, которые не поддерживают SVG, проигнорируют неизвестный тег SVG. Но из-за того, что img и image это одно и то-же, то они увидят этот код вот таким:

<img src="test.png" width="100" height="100">

То есть покажут нашу png картинку. Вот такая вот магия :-)

Использование SVG изображения через CSS свойство background-image

Тут есть несколько решений. Одно из них использовать библиотеку Modernizr и если в браузере не будет поддержки SVG, то можно будет задать фоновое изображение другого формата через класс у html no-svg.

Этот путь требует библиотеку Modernizr и наличие включенного JavaScript. Но этого можно избежать, весь есть более элегантное решение:

.my-element {
  background-image: url (test.png);
  background-image:
    linear-gradient (transparent, transparent),
    url (test.svg);
}

Этот способ использует multiple backgrounds для определения поддержки SVG. Он практически идеален, за исключением стандартного браузера Android 2.3.

Теперь, я буду использовать SVG гораздо чаще. Осталось только разобраться как экспортировать его из фигур в Photoshop, но это совсем другая история.

Read more!