Доступные svg-иконки с инлайновыми спрайтами

Установка через JS

Создаем переменную с кодом нашей иконки и используем его на нужном нам элементе

let icon = ‘<svg width=»128″ height=»128″ role=»img» xmlns=»http://www.w3.org/2000/svg» viewBox=»0 0 24 24″ stroke=»#337AB7″ stroke-width=»2″ stroke-linecap=»square» stroke-linejoin=»miter» fill=»none» color=»#337AB7″>\
<path d=»M7.3010863,14.0011479 C8.0734404,15.7578367 9.98813711,17 11.9995889,17 C14.0024928,17 15.913479,15.7546194 16.6925307,14.0055328″/> \
<line stroke-linecap=»round» x1=»9″ y1=»9″ x2=»9″ y2=»9″/> \
<line stroke-linecap=»round» x1=»15″ y1=»9″ x2=»15″ y2=»9″/> \
<circle cx=»12″ cy=»12″ r=»10″/> \
</svg>’; // наша иконка
let svgimg = document.querySelectorAll(«.happyface»); // находим все элементы с классом happyface
for( let i = 0; i < svgimg.length; i++){ // проходим циклом по всем элементам
svgimg.innerHTML = icon; // вставляем в них иконку
}

И далее, как в варианте с CSS, вставляем нужную нам иконку куда угодно и сколько угодно раз.

<div class=»happyface»></div>

На jQuery код получается проще:

let icon = ‘…’; // наша иконка
$(«.happyface»).html(icon); // вставляем иконку в элемент с классом happyface

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

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

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

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

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

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

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

также в Chrome на Windows7 страница со встраиваемыми шрифтами может зависать при открытии, а в некоторых других браузерах вместо иконок может оказаться всё что угодно, например, эмоджи (проблема была описана в статье Криса Коэра Icon System with SVG Sprites).

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

Ещё одна статья в поддержку SVG: Ten reasons we switched from an icon font to SVG.

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

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

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

Использование

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

Внедрение

Встраивайте свои иконки в HTML-код вашей страницы (в отличие от внешнего файла изображений). Здесь мы использовали пользовательскую и .

Спрайт

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

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

CSS

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

Атрибут необходим, если вы хотите изменить размер значков с использованием

Обратите внимание, что атрибут является обязательным

Работа с SVG

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

• Обработка фокуса нарушена в Internet Explorer и Edge. При встраивании ваших SVG добавьте к элементу . Узнайте больше на Stack Overflow

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

• Safari пропускает при использовании не сфокусированных SVG. Поэтому, используйте при встраивании файла и используйте CSS для визуального скрытия эквивалентной метки.

Отображение иконок в браузерах без поддержки SVG

В данный момент самый удобный и надежный способ вставки — в виде спрайта.

Для замены картинок в IE8 и старше можно использовать способ с множественными фонами:

Для старых Опер можно использовать такой селектор:

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

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

UPD: Большое спасибо Роме Комарову за дополненния к тексту.

UPD от 04.04.14:

1. Дополнение от Сережи Борончиева: SVG в data URI будет работать везде, если заэскейпить строку, например, с помощью (JS).
2. Прекрасный пост от Lеа Verou: Dynamically generated SVG through SASS + A 3D animated RGB cube!. Она предлагает использовать SASS, чтобы автоматически генерировать SVG-градиенты для использования в data URI.

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

iconmelon.com

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

Upd. от 4.07.2020: к сожалению, сайт давно не работает.

От автора проекта есть вдохновляющая статья про SVG-иконки, анимации и эффекты: SVG icons FTW.

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

flaticon.com

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

Установка в HTML

Можно вставить SVG графику непосредственно в нужное место HTML кода:

<svg width=»128″ height=»128″ role=»img» xmlns=»http://www.w3.org/2000/svg» viewBox=»0 0 24 24″ stroke=»#337AB7″ stroke-width=»2″ stroke-linecap=»square» stroke-linejoin=»miter» fill=»none» color=»#337AB7″>
<path d=»M7.3010863,14.0011479 C8.0734404,15.7578367 9.98813711,17 11.9995889,17 C14.0024928,17 15.913479,15.7546194 16.6925307,14.0055328″/>
<line stroke-linecap=»round» x1=»9″ y1=»9″ x2=»9″ y2=»9″/>
<line stroke-linecap=»round» x1=»15″ y1=»9″ x2=»15″ y2=»9″/>
<circle cx=»12″ cy=»12″ r=»10″/>
</svg>

Вариант хороший, но только для одной картинки. Если картинок много, у нас получится масса одинакового кода.