Генерируем svg-спрайты в Adobe Illustrator

Опубликовано: Воскресенье, Октябрь 5, 2014 Комментарии (0)

В последнее время как никогда стало актуально использование векторной графики в HTML-верстке. Чтобы иконки/кнопки на вашем сайте хотелось нажимать, а логотип не смотрелся полуразмытой какашкой, сейчас приходится выдумывать разные способы улучшения отображения сайта. Некачественная графика на сайте сейчас плохо смотрится не только в Apple продукции.

UPD. Не стоит тратить свое время на генерацию этим методом. Сейчас пока что я использую для этого связку плагинов  Gulp.js  gulp-svg-sprite и gulp-svg2png  (для генерации png fallback).

Когда вообще нужны svg-спрайты

Прежде чем вдаваться в технические подробности генерации svg спрайтов, нужно определиться вообще что это такое и нужно ли вам это.

Векторную графику на сайт можно встроить по-разному:

  • Шрифтовые иконки
    Пока самый лучший способ, но у меня просто не получилось сгенерировать из своих svg иконок качественный шрифт ни одним из доступных способов. Поэтому использую данный способ только когда можно обойтись FontAwesome
  • Svg встраивание на страницу
    SVG (Scalable Vector Graphic) – масштабируемая векторная графика. Вполне известна еще со времен древних IE. Но ее использование более всего обосновано стало относительно недавно. SVG можно встроить в HTML различными способами: тегами (<object>, <embed>, <svg>); прописать адрес в атрибут src тега <img> (не забывая про fallback для старых браузеров); background-image в css файле (обычное подключение или inline встраивание в файл стилей).

Более подробную информацию по этим способам, конечно, можно найти в интернете :)

Спрайты в верстке — это способ сократить количество HTTP запросов для графических ресурсов, которые посылает ваш сайт. Изображения объединяются в одно большое изображение с определёнными X и Y координатами.Подробнее

Так вот когда же я использую svg-спрайты? Для иконок, основных графических элементов, НЕ используемых на всем сайте, а лишь только на отдельных страницах, которые будут подключены обычным background-image и не будут встроены в css (см. статью про DATA:URI). Основные элементы по мере возможности встраиваю сразу в css.

Генерируем svg-спрайты в Adobe Illustrator

Недавно я нашла плагин, который облегчает генерацию svg спрайтов в Adobe Illustrator. Автор плагина просит за скачивание от 1$ (можно и больше, если вам очень хочется поддержать автора).

В одном проекте мне нужно было сгенерировать в одном спрайте достаточно много мелких элементов и безусловно делать это вручную — просто с ума сойти можно. Поэтому я поделилась с автором плагина долларом :)

Плюсы плагина

  • Можно достаточно легко и быстро менять спрайт в ходе работы.
  • Самому располагать элементы внутри спрайта так, как захочется.
  • Сразу сделать спрайт в нужном формате (svg, png, gif)

Совместимость

Автор плагина говорит, что плагин тестировался в Adobe Illustrator CC на Mac. Также он утверждает, что плагин должен нормально работать с версиями выше CS4. У меня работает на CC в Windows.

Установка

  1. Скачайте плагин с официального сайта.
  2. Найдите скачанный файл «Sprite CSS Generator.jsx» в своих загрузках и перенесите его в папку «Adobe Illustrator folder > Presets > “en_GB” > Scripts».
  3. Откройте Adobe Illustrator
  4. Создайте документ для спрайтов (см. ниже как именно)
  5. Выберите пункт меню, чтобы запустить плагин «File > Scripts > Sprite CSS Generator». Откроется окошко для генерации css кода с положением всех элементов спрайта.

Как пользоваться этим плагином

  1. Создайте документ с web профилем.
    Тут главное чтобы цветовая схема документа была RGB. И обязательно снимите галочку с пункта “Align New Objects to Pixel Grid” в дополнительных опциях при создании документа! Это может повлиять на конечное отображение спрайта и координаты иконок (особенно неприятно будет когда при наведении иконка будет «прыгать»).svg спрайты в Adobe Illustrator
  2. Вставьте в документ графические элементы, которые планируете поместить в спрайт.
  3. Создайте из вставленных графических элементов символы, присваивая им названия, которые затем будут соответствовать классам в css, например:
    При создании символа убедитесь еще раз, что галочка “Align to Pixel Grid” снята.

    При создании символа убедитесь еще раз, что галочка “Align to Pixel Grid” снята.

  4. Генерируем код с помощью плагина.
    Открываем окно скрипта “File > Scripts > Sprite CSS Generator”. Если нужно, выбираем опции (“use SVG with PNG fallback” и “use GIF fallback for IE6+” ), но я их не выбираю, так как не копирую стиль подключения background-image, а копирую лишь стили с background-position, width, height. Жмем в окне кнопку “Generate/Update CSS”. Копируем нужные стили для элементов в спрайте в свой css, scss или less файл.

    Плагин в действии

    Плагин в действии

  5. Сохраняем файл спрайтов в нужном формате.
    Я сохарняю в ai в качестве рабочего исходника, svg и png.

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

Заключение

В заключение могу добавить, что это, конечно, не полностью автоматический способ (как в случае с обычными спрайтами и, к примеру, генерацией их в Compass), однако когда нужно сгенерировать svg спрайт, это может стать вполне неплохим вариантом.

Читайте также:

Комментируйте: