Чуть больше года назад мы затронули тему создания HD-версии сайта для устройств с повышенной плотностью пикселов, обсудили проблемы, возникающие при этом, и возможные варианты их решения. Прошёл год, таких устройств стало ещё больше, создавать графику для всего этого зоопарка становится всё сложнее.
К счастью для веб-дизайнеров, постоянно улучшаются не только качество экранов и скорости процессоров, но и технологии, которые поддерживаются браузерами на любых современных устройствах! Спустя год можно уже всерьёз поговорить об использовании векторной графики (которое предсказывал Анатолий) в веб-сайтах!

Векторную графику в массы!

Формат графики, которую мы будем использовать в вебе, называется SVG (Scalable Vector Graphics). SVG — это специальный язык разметки векторной графики, который разрабатывается W3C с 1999 года. Возможность создавать SVG доступна во многих векторных редакторах: Illustrator, Corel Draw или Sketch.
Какие же есть достоинства у SVG, существенные для веб-сайтов?
  • Относительно небольшой размер файла, который, к тому же, хорошо сжимается благодаря SVGZ.
  • Неограниченная масштабируемость (отчего формат и получил своё название), а значит, такая графика отлично выглядит на retina-подобных экранах!
  • Достаточно много изменяемых параметров. Например, цвет заливки, позиции отдельных элементов, таких фильтров как размытие или даже анимации.
Один файл — все размеры и любые цвета.
Основными проблемами при использовании SVG ранее были слабая поддержка этого формата браузерами и сложность создания страховочных вариантов, которые бы отображали обычные растровые изображения, в случае, когда векторные не поддерживаются. Сейчас же ситуация изменилась к лучшему — теперь проблемы возникают только с IE8 и браузерами для Android 2.3 и младше. С этим, как мне кажется, можно смириться.

Подготовка графики для использования в веб-сайте

Естественно, первым делом вам нужно правильно экспортировать графику для использования в веб-сайте. Поделюсь с вами некоторыми тонкостями экспорта SVG из Adobe Illustrator.
Общая рекомендация для любых приложений — при экспорте используйте версию SVG 1.1 — на данный момент она наиболее полно поддерживается браузерами.
А теперь — чудо-руководство по экспорту из Illustrator в SVG с минимальным размером при максимальном качестве! Итак, вперёд. File > Save as…

1. Профиль SVG

Как я уже заметил выше, наш выбор — обычная версия SVG 1.1. Ее же рекомендует W3C.

2. Подраздел «Fonts»

Здесь у нас целых две опции, которые нужно подкорректировать. Type — по умолчанию выбран как Adobe CEF, но нам нужен SVG. Он рекомендован W3C, и при этом мы сможем встраивать глифы шрифта в наш файл при помощи следующей настройки — Subsetting. К сожалению, SVG-шрифты не полностью поддерживаются браузерами Firefox и IE. Когда ситуация изменится, пока не известно. В Firefox и IE лучше встраивать веб-шрифты Google Fonts или Typekit от Adobe.

3. Подраздел Image options

Тут нужно выбрать, каким образом мы крепим растровые изображения к SVG — встраивая их в файл напрямую, либо ссылаясь на внешний файл. У каждого из этих способов есть свои плюсы и минусы. При использовании ссылки на внешний файл уменьшается размер SVG-файла, а при встраивании экономится один запрос при загрузке сайта.
ПОДСКАЗКА: Preserve Illustrator Editing Capabilities — не на шутку раздувает размер файла.

4. Decimal Places

Настройка, отвечающая за точность экспортируемого вектора — проще говоря, уточняет координату каждой вершины до N знаков после запятой. Зачастую такая точность не нужна, но на размер файла это влияет значительно.

Оптимизация с помощью инструментов Warp Tool и Simplify

Чем больше количество вершин в вашем векторном изображении, тем больше размер файла. Двумя наиболее удобными способами уменьшения количества вершин являются ручная работа над изображением с использованием Warp Tool или запуск автоматического упрощения пути Simplify.
Даже на самой простой фигуре я сэкономил 14 вершин и несколько килобайт в размере файла.
Готово!
Подготовив таким образом наше изображение к сохранению, мы заметно уменьшили размер файла и получили на выходе максимально совместимый файл.
Теперь пришло время разобраться, как мы будем встраивать его в страницу!

Вставка SVG на страницу

Вставка SVG как IMG

Наиболее простым способом встроить файл является использование тега img. Выглядеть это будет примерно вот так:
<img src="file.svg" alt="SVG File">
Конечно, здесь мы можем задавать размеры точно так же, как и для растровых изображений, например, в формате PNG. Этот метод поддерживается достаточно широко.

Вставка SVG как фона

Настолько же легко мы можем использовать SVG-графику как фон:
<a href="/" class="logo">Logo</a>
.logo {
    width: 100px;
    height: 50px;
    background-image: url(logo.svg);
    background-size: 100px 50px;
}
Здесь нужно обратить внимание, что кроме размера элемента, мы должны указывать и размер фона, иначе мы увидим векторное изображение оригинального размера. Этот метод также широко поддерживается современными браузерами.

Вставка SVG-кода непосредственно в страницу

Каждое векторное изображение в формате SVG — по сути текстовый файл, в котором это изображение описывается. Это позволяет вставлять нам этот код непосредственно в тело страницы, попутно используя пару отличных особенностей.
Вначале помещаем на страницу наше изображение и не забудем присвоить отдельным элементам свои классы:
<svg …>
<ellipse class="background" …/>
<path class=”logo” …/>
</svg>
Теперь мы можем присваивать специальные свойства для SVG прямо в стилях, например, заливку или обводку! Со списком свойств можно ознакомиться здесь.

Вставка SVG как OBJECT

Более удобным способом (система управления контентом или фреймворк делает это автоматически) по сравнению со вставкой кода является тег object:
<object type="image/svg+xml" data="logo.svg" class="logo">
Logo
</object>
А изображения для страховки на случай, если SVG не поддерживается, мы можем добавить прямо в стили (правда, нам понадобится, как и в предыдущих способах, библиотека Modernizr):
.no-svg .logo {
    background-image: url(logo.png);
}

Как развивать идею использования SVG

Стоит ли ограничиваться простым использованием SVG как хранилища «резиновых» иконок или есть и более крутое применение? Ещё бы!
Всё чаще наши коллеги используют возможности SVG на полную катушку. С появлением таких библиотек, как Snap.svg, SVG.js или SvgVerlet.js можно создавать сложные взаимодействия и анимации с векторными объектами.
Как вам создание анимированных иконок и создание анимированных чекбоксов и радио-кнопок? Или пример работы библиотеки svg.js и пример использования SvgVerlet с эмуляцией физических взаимодействий. И, конечно, совсем свежие обзоры Playstation 4 и Xbox One от сайта Polygon.
Думаю что выглядит неплохо, да и вдохновляет весьма сильно!