Раньше я не использовал SVG, поскольку рабочие проекты были с поддержкой Internet Explorer 6/7. Да и не требовалось поддержки ретины. Но сейчас, спустя время, настало время использовать SVG на полную.
Поддержка браузерами
На данный момент, SVG поддерживается всеми современными браузерами, начиная с Inernet Explorer 9 (CIU). По данным сайта Can I Use, SVG поддерживается в мире на 94.55% и на 83.13% в России. Самая главная проблема — это IE 8, доля которого все еще достаточно велика.
Fallback
У нас есть несколько вариантов использования SVG изображений в HTML странице:
- В теге
img—<img src="test.svg" alt=""> - Через CSS свойство
background-image—background-image: url(test.svg) - Вставить 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, но это совсем другая история.
