Иконка главная страница. Как реализовать кросс-браузерные 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;
иконки в спрайте недоступны для стилей страницы;
большие спрайты могут вызывать проблемы с производительностью.