Набор svg иконок. Как реализовать кросс-браузерные SVG иконки

Адаптивный дизайн - популярная тема. Экраны давно вышли за пределы стандартных разрешений, и сайты могут смотреть и на девайсах размером с ладонь, и на больших мониторах. Сайт должен одинаково хорошо выглядеть вне зависимости от размера устройства и плотности пикселей. Для адаптации дизайна и контента существует много разных методик и технологий. Векторная графика, SVG, по-моему, одна из самых интересных тем в этом направлении.

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

Вот, например, один SVG-спрайт в 4-х разных размерах, исходный - 32px:

SVG отлично справляется с этой задачей и хорошо подойдет для использования в адаптивных раскладках.

Иконки для дизайна можно взять из готовых наборов или нарисовать свои.

Наборы готовых иконок iconmelon.com

Большая коллекция иконок на разные темы. Загруженные иконки предлагается вставлять в HTML с помощью use .

icomoon.io

Удобнейший инструмент. Можно не только выбрать и скачать готовые иконки, но также можно загрузить свои и получить их в виде шрифта и/или спрайта. Вместе со спрайтом предлагается загрузить его PNG-версию.

flaticon.com

Большая коллекция, иконки удобно поделены на категории . Выбранные иконки можно скачать в отдельных форматах (шрифт, SVG, PNG) или во всех сразу.

Рисуем сами

Для создания своего набора иконок потребуется векторный редактор:

  • Adobe Illustrator - по-моему, лучший. 599 руб./месяц в составе подписки на Creative Cloud;
  • Inkscape - бесплатный и не очень удобный;
  • Sketch - для Mac OS, $79.99. Имеет некоторые проблемы с векторизацией обводок, но вообще довольно удобный.
Снижение веса

Готовый SVG-файл обычно содержит много лишнего, но при этом хорошо поддается оптимизации. Из кода удаляются ненужные атрибуты, пробелы и переносы, а в числах уменьшается количество знаков после точки. Вес файла уменьшается на 30-50%. Инструменты для оптимизации:

grunt-svgmin - задача для Grunt с использованием svgo . При этом файлы сами будут браться из папки с исходниками, оптимизироваться и складываться в папку с результатами. Очень удобно.

Спрайт или иконочный шрифт?

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

С помощью шрифта можно делать не только однотонные иконки, но и разноцветные .

Свой шрифт можно сделать, например, на сайте icomoon.io/app/ . Примерная последовательность действий:

  • Выберите иконки из набора и/или загрузите свои.
  • Кликните внизу кнопку Font.
  • На этом шаге можно переназначить символы для иконок или сразу загрузить получившийся шрифт.

    • Вместе со шрифтом в четырех форматах (.woff, .svg, .ttf, .eot) загружается CSS и демо-файл.

    Встраиваемые шрифты работают даже в 8-м IE, но при этом имеют неожиданные проблемы с поддержкой в некоторых современных браузерах. Opera Mini вообще не поддерживает кастомные шрифты, Firefox’у требуются заклинания для сервера, где лежит шрифт (решается с помощью base64), Chrome может выгрузить шрифт, если вы надолго оставили вкладку открытой:

    также в Chrome на Windows7 страница со встраиваемыми шрифтами может зависать при открытии , а в некоторых других браузерах вместо иконок может оказаться всё что угодно:

    Картинка из статьи Криса Коэра Icon System with SVG Sprites . Я на этом же месте как-то видела иероглифы, но сейчас там SVG, так что скрин сделать не получится. CSS-tricks , кстати, очень активно использует SVG в своем новом дизайне, а разработчики Codepen в новом дизайне редактора отказались от использования иконочных шрифтов в пользу SVG.

    Несмотря на удобство использования, проблемы поддержки шрифтов в данный момент заставляют сделать выбор в пользу иконок на SVG.

    Хочется надеятся, чтоб в будущем встраиваемые шрифты будут лучше поддерживаться.

    Как существуют способы вставки SVG на страницу?

    Спрайт .icon { background-image: url(your.svg); }

    Плюсы:

    • короткий читабельный код;
    • картинка кешируется;

    Минусы:

    • запрос к серверу;
    • в старых Операх фоновый SVG поддерживается странно: могут возникать проблемы при добавлении рамки элементу с SVG-фоном, а в Opera Mini работают только фоны без viewBox;
    • иконки в спрайте недоступны для стилей страницы;
    • большие спрайты могут вызывать проблемы с производительностью.
    Base64 в data URI .icon { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL...); }

    Плюсы:

    • нет запроса к серверу.
    • хорошая поддержка браузерами: все, кроме Оперы на Presto и старых IE.

    Минусы:

    • картинка не кешируется и каждый раз рендерится заново;
    • длинная строка в CSS;
    • не читабельно: по коду непонятно что он содержит;
    • закодированная картинка может весить больше исходной;
    • для закодирования/раскодирования нужны дополнительные инструменты;
    • иконки недоступны для стилей страницы.
    SVG в data URI .icon { background-image: url("data:image/svg+xml;utf8,