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

::: разработка, фронтенд, svg
Логотип 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-image — background-image: url(test.svg)
  3. Вставить svg инлайн (не рассматривается в статье)

Для первых двух способов есть очень изящные решения. Начнем со способа в котором мы используем тег 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, но это совсем другая история.