UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Как реализовать кросс-браузерные SVG иконки
Редакція
Редакція

Опубліковано

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

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

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

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

PNG и SVG

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

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

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

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

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<!-- Generator: Sketch 3.1 (8751) - http://www.bohemiancoding.com/sketch -->
twitter-icon
Created with Sketch.






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

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

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


Twitter


Dribbble


GitHub

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



<!-- Generator: Sketch 3.1 (8751) -
http://www.bohemiancoding.com/sketch -->
twitter-icon
Created with Sketch.







Twitter


Dribbble


GitHub

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

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

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


<!-- Generator: Sketch 3.1 (8751) - http://www.bohemiancoding.com/sketch -->
twitter-icon
Created with Sketch.






 



Посмотрите, какие элементы я удалил. Элементы The

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

 .icon {
max-width: 40px;
max-height: 40px;
transition: .2s;
-webkit-filter: drop-shadow(0 1px 0 #11222d);
}

Если вы последовали этим шагам, в браузере вы увидите резкую и чистую векторную версию вашей графики. Совет: Проверьте, действительно ли графика в формате SVG, масштабируя с помощью клавиш Command-+ во время просмотра в браузере. Графика должна оставаться четкой, как бы вы ни масштабировали.

Реализация фоллбека

Если вы делаете это для клиента, вам важно знать список поддерживаемых браузеров. Встроенные SVG иконки работают во всех браузерах, кроме Internet Explorer 8 (и более ранние версии) и Opera Mini. По статистике, IE8 используют всего 4% пользователей, а Opera Mini – около 3%. Так что в вашем случае фоллбек и не нужен, но я продемонстрирую его реализацию.







<!-- twitter -->

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

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

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








twitter



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

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

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

<!doctype html>



David Darnes - Web Designer & Front-end Developer

<!--[if IE]>

<![endif]-->

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

<!doctype html>



David Darnes - Web Designer & Front-end Developer

<!--[if IE]>

<![endif]-->












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

Прячьте!

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

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

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

<!doctype html>



David Darnes - Web Designer & Front-end Developer

<!--[if IE]>

<![endif]-->














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

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

 







Twitter









Dribbble









GitHub




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

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

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

<!doctype html>



David Darnes - Web Designer & Front-end Developer

<!--[if IE]>

<![endif]-->














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

<!doctype html>



David Darnes - Web Designer & Front-end Developer

<!--[if IE]>

<![endif]-->


Twitter
Twitter account



Dribbble
Dribbble portfolio




GitHub
GitHub account



Меняя элемент group на symbol. Мы можем реализовать все эти улучшения. Можно удалить элемент из SVG-спрайта, делая код еще чище.

Заключение

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


Перевод статьи David Darnes

Топ коментарі (0)