Сейчас SVG актуальнее, чем когда-либо

Странно говорить о том,что SVG в данный момент заслуживает внимание, просто потому что ей уже 100 лет в обед. В то же время, нет сомнений, что SVG переживает сейчас период возрождения.

Давайте посмотрим почему же сейчас это стало так актуально и какие технологии делают использование SVG легче в современных веб-сайтах.

Почему сейчас?

SVG получило огромный приток интереса при взлёте Отзывчивого дизайна, разработчики стали искать решения, которые масштабировались в различных устройствах. SVG весят немного и выглядят отлично при ресайзе, что делает их привлекательными альтернативами обычных изображений и иконок.

Например, вы можете использовать SVG дл иконографики как тут объясняет Иен Фитер из Lonely Planet. Сайт Lonely Planet использует SVG для своей иконографики, а также для малых изображений, таких как их лого например.

Использование SVG изображений не ограничено лишь иконками. Много сайтов используют их в различных случаях исходя из их гибкости. Они могут использоваться для замены больших изображений, как например на сайте Lynx Mass Debates для обеспечения визуального представления каждой страницы с вопросом.

Использование SVG как замена изображений

SVG может использоваться в Adobe Illustrator или других инструментах, как например Sketch, выбрать нужно «Сохранить как» и далее выбрать SVG из типа расширений при сохранении. После этого можете использовать ваш SVG несколькими способами:

Наипростейший способ использования — это ссылка на SVG файл, как на обычное изображение:

    background-image: url('myNewShinySVG.svg');

Это содержит в себе такие же недостатки как и ссылка на изображение — дополнительный HTTP запрос для каждого файла, что вы добавляете. Отлично то, что можно конвертировать SVG в data-uri и сохранение этого. Есть куча инструментов для конвертации изображений в data-uri, например этот: http://duri.me/. Помните, что для поддержки старых браузеров нужно делать резерв в виде изображений. Modernizr обеспечивает CSS класс хук для этого:

    .exampleIcon {
        background-image: url('myNewShinySVG.svg');
    }

    .no-svg .exampleIcon {
        background-image: url('myNewShinySVG-fallback.png');
    }

Я включил это как стандартный файл просто для этого примера, но на практике стоит конвертировать это в data-uri, чтобы не было лишних HTTP запросов.

Если вы используете SASS, то ваш CSS может быть немного уменьшен:

.exampleIcon {
    background-image: url('myNewShinySVG.svg');

    .no-svg & {
        background-image: url('myNewShinySVG-fallback.png');
    }
}

Включение SVG в такой способ — это отлично, если вы используете небольшое количество SVG файлов в вашем сайте, но формирование большого количества в такой способ может быть сложно, если изменения SVG дизайна и вам тогда нужно будет прееделать все ваши data-uri и их резервы PNG каждый раз. К счастью, есть лучшее решение.

Используя Grunt вы можете задействовать задачу Grunticon, созданные ребятами из Filament Group. Grunticon позволяет вам указать папку или папки, в которых вы можете хранить ваши SVG файлы. Она пройдёт через каждый из наших SVG файлов и создаст необходимый CSS для включение их в своей сайт, а также сгенерирует резервные PNG файлы. Дале он создаст небольшой кусок JavaScript для добавление в ваш header, который определит поддерживается ли эта фича и выдаст наиболее подходящий CSS файл для вашего браузера, чтобы загрузился SVG или PNG файл.

Grunticon — это наилучшее решение, из найденных мной, для поддержки SVG на сайте и я советую попробовать вам его, если вы хотите начать использовать SVG при разработке.

Рекомендую пойти ещё дальше и оптимизировать ваши SVG файлы перед использованием в продакшене; SVG файлы, которые сохраняет Illustrator можно уменшить. Есть несколько способов сделать это, вы опять же можете добавить задачу grunt-svgmin. Есть много других способов использовать SVG Optimiser, all detailed in it’s documentation. Если вы не в восторге от этих методов, то вы можете использовать онлайн конвертер например вот этот Питера Колингриджа.

Для более глубокого взгляда на способы имплементирования SVG и резервов, взгляните на эту статью CSS Tricks или отличный пост Давида Бушела.

SVG для анимации

Другой сильной стороной использования SVG — это её более частое использование в веб-анимации. Отдельные части SVG могут быть анимированы с помощью CSS, в то же время техникой, такой как эта эффекты рисования линий, речь Jake Archibald были открыты недавно и представляют ещё больше возможностей.

SVG также имеют очень основательные библиотеки для рисования и анимации, такие как Raphael.js, Snap.svg и D3.js.

Raphael.js — это библиотека, которая обеспечивает поддержку SVG даже для старых браузеров, наподобие IE6; она делает это с помощью резерва через SVG как VML. Она даёт доступ к множеству простых SVG анимаций и опций взаимодействия, а также к библиотеке сфокусированной на графах — gRaphael. Пройдите по ссылкам на демо в обеих сайтах и посмотрите возможности этих библиотек.

Snap.svg также была сделана создателем Raphael, Дмитрием Барановским. Её целью является обеспечения доступа к множеству SVG фич. Таким образом она способна больше, чем Raphael, но поддерживает только современные браузеры.

D3.js — это библиотека для визуализации данных с помощью сочетания HTML, SVG и CSS, созданная Майком Бостоком. Есть множество примеров, как может она использоваться demo галерея. D3 поддерживает современные браузеры, то есть все, кроме IE8 и ниже.

SVG анимации

Один из самых отличных примеров, что я когда либо видел — создан Vox Product для Xbox One и Playstation 4 ревью на вебсайте Polygon. Очень рекомендую вам прочесть отличную статью разработчиков описывающего как и почему они выбрали использование SVG для анимации на их сайте, но этот кусок из статьи описывает несколько причин:

...стандартные форматы изображений, типа jpg, gif, или png не всегда хорошо работают, если нужно увеличить или уменьшить размеры как продиктовано устройством пользователся. SVG с другой стороны, отлично адаптируются: векторные изображения могут увеличиваться или уменьшаться без потери качества и анимация или любые операции над SVG элементами адаптируются к любым размерам без дополнительных телодвижений.

D3.js широко используется для визуализации данных. Полный список ссылок можно посмотреть в этих примерах и коллекциях.

Есть много других SVG демо анимаций в сети.

Codedrops содержит отличные примеры того, как SVG анимации могут использоваться на сайте, а также как хорошо вы можете анимировать SVG, чтобы добавить лоск к вашим иконкам или оформить ваши эффекты наведения.

Snap.svg также имеет пару отличных демо на своих сайтах, которые показывают лишь толику возможностей.

Если кто-то увидет какие-то примеры SVG анимации используемые на продакшн-сайтах, присылайте мне и добавим их к этой статье.

Поддержка браузеров

SVG поддерживается всеми современными браузерами, включительно IE 9. Для полного списка SVG, смотрите CanIUse.com таблицу поддержки.

Как уже упоминалось віше, есть решения для обеспечения поддержки старых браузеров. Grunticon помгает делать резервные изображения для поддержки старых браузеров. Очевидно вы можете просто эти резервы делать самостоятельно, но я рекомендую посмотреть на GruntIcon, если вы планируете работу более, чем парочка SVG файлов на вашем сайте.

Raphael также обеспечивает SVG резервы для старых браузеров, если вам это нужно.

Должен ли я использовать SVG?

Так же как и любую технологию, вы должны знать как использовать сильные или слабые стороны SVG и знать когда стоит их использовать.

SVG уже готова для всеобщего использования. Я думаю, что сейчас уже есть инструменты, которые позволяют лёгко избавится от рутинных аспектов поддержки SVG, что делает её более доступной для разработчиков.

Я советую использовать эту технологию всем дизайнерам, просто потому что она очень гибка, легка и масштабируема для всех устройств. Нет, конечно же, никакого универсального средства для всех ситуаций и нужно использовать её в сочетании с другими подходящими решениями для изображений.

Поэтому, если вы ещё не используете SVG или только поглядываете на неё время от времени, то думаю, стоит выделить немного времени для более глубокого анализа того, что они вам могут предложить и это время не будет потрачено зря ни для вас, ни для пользователей вашего сайта.

Оригинал - Падение и подъём SVG