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

В этом посте я продемонстрирую как реализовать SVG иконки, способ реализации фоллбека, а также как превратить иконки в SVG-спрайт.

Базовая интеграция SVG-элементов

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

По скриншоту выше вы можете видеть, что я использую иконки (Twitter, Dribbble и GitHub), чтобы символически ссылаться на свои рабочие профили. Я скачал эти иконки из flaticon , где было множество различных иконок и символов в векторном и растровом форматах.

PNG и SVG

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

Я использовал Sketch для получения PNG-иконок, и я снова им воспользуюсь, чтобы подготовить SVG иконки.

Если вы посмотрите на скриншот выше, вы заметите, что я назвал все группы и фигуры в левой панели соответствующим образом (в Adobe Illustrator есть такой же список в панели Layers). Очень важно называть все исходники правильно, это не только поможет хорошо организовать проект, но и поможет в последующих этапах этого урока.

Экспорт SVG-версий

Теперь я экспортирую иконки в SVG иконки, это очень просто сделать с помощью инструмента нарезки в Sketch (Slicing). Для более детального описания работы этой опции изучите Понимание опций экспорта в Sketch . Я буду экспортировать их как отдельные файлы и помещу их в папку с изображениями в своем проекте.

В норме, чтобы показать картинку на сайте вы ссылаетесь на исходник с помощью элемента с атрибутом src или чем-то похожим:

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

twitter-icon Created with Sketch.

Это одна из иконок, которую я экспортировал, в формате XML. Этот код очень похож на HTML (это структурный формат), что означает, что мы можем встраивать его прямо в страничку.

Добавление SVG в HTML

Давайте начнем с базовой HTML-страницы, которая включает PNG-иконки с их анкорами, и контейнером:

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

twitter-icon Created with Sketch.

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

Более чистый SVG

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

twitter-icon Created with Sketch.

Посмотрите, какие элементы я удалил. Элементы The , , и сейчас не нужны, но они пригодятся дальше в этом уроке. Также там есть несколько элементов которые ссылаются на группы, и соответствуют группам, созданным в моем Sketch-документе. По умолчанию Sketch размещает все внутри страницы, отсюда и элемент группы

Вот одна из моих SVG иконок на страничке, и вы заметите, что моя оригинальная PNG-иконка все еще на месте, но она закомментирована. Это изображение PNG и будет нашим фоллбеком.

Удаление комментариев

Сначала я удалю комментарии. Надо подвинуть вверх и к элементу svg>, сразу после группы, содержащей саму иконку. Затем я оберну в SVG элемент под названием foreignObject. Если брайзер не сможет понять векторную информацию SVG, тогда он будет ссылаться на “внешний объект ” и будет использовать из него. Нам также нужно дать браузеру понять, что нужно обращаться к векторной версии, если такая поддерживается. И для этого используется элемент , в который я обернул и группу, и сам foreignObject. И вот обновленный код:

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

Создание SVG-спрайта

SVG спрайты работают очень похоже на обычные графические спрайты . В их простейшей форме спрайты представляют собой коллекцию графических элементов, объединенных в одно изображение. Каждое изображение затем выбирается с помощью CSS и HTML, с помощью указания координат и «окна» просмотра.

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

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

Затем мне нужно туда поместить иконки. Мне не надо переносить весь SVG, нужно только элемент group с его содержимым. Это я могу встроить в элемент в голове файла.

David Darnes - Web Designer & Front-end Developer

Примечание : Если вам удобно использовать Grunt, вот плагин , который автоматизирует объединение всех отдельных SVG-файлов.

Прячьте!

Теперь у нас все SVG иконки в head, и нужно их спрятать; добавляем атрибут display=”none” к новому svg>, что значит ни одна иконка не будет появляться вверху странички.

Определение каждой SVG иконки

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

David Darnes - Web Designer & Front-end Developer

Как использовать SVG иконки

Иконки теперь определены, но нужно также обозначить метод их использования, и для этого возьмем элемент use. Элемент позволяет взять любой элемент из и вызвать его в любом месте на странице. Мы выбираем элемент по его ID, поэтому было важно назвать иконки правильно еще в документе Sketch. Посмотрите на ID в примере выше, и как я ссылаюсь на каждый, используя элемент .

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

Совершенствуем наш SVG-спрайт

Еще один плюс к использованию SVG-спрайтов состоит в том, что код страницы гораздо чище, и его проще читать другим людям, которые также работают над сайтом. Мы можем еще немного улучшить результат. Внизу я заменил элементы в своем SVG-спрайте на элемент symbol, плюс я передвинул атрибут viewbox из SVG элементов на странице к новым элементам symbol.

David Darnes - Web Designer & Front-end Developer

Использование не только более правильно с точки зрения семантики, в моем примере, но также избавляет от необходимости повторять атрибут viewbox вместе с элементами и . Мы можем вернуть элементы title иdesc, которые удалили раньше, и использовать их для улучшения доступности иконок. Примечание : Помните, что содержимое элементов по умолчанию отображается в IE7.

David Darnes - Web Designer & Front-end Developer Twitter Twitter account Dribbble Dribbble portfolio GitHub GitHub account

Меняя элемент group на symbol. Мы можем реализовать все эти улучшения . Можно удалить элемент из 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,