Иконки bootstrap

Установка в 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>

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

Как менять цвет svg-иконки через CSS

Верстальщику часто приходится обыгрывать реакцию иконки при наведении на неё мышки. В случае с svg-картинками можно просто менять их цвет.

Научимся это делать на примере иконки «ВКонтакте»:

Логотип сложный, поэтому svg-код, который его математически описывает, довольно длинный. Посмотрим, как это выглядит в HTML:

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

Обратите внимание на тег (в переводе с английского «путь»). Он позволяет задать любую фигуру компактной строкой — описанием пути от начальной точки до конечной через промежуточные координаты.. Строка с данными задаётся атрибутом d тега

Она содержит команды, которые закодированы набором букв и чисел. Буква представляет тип команды, а числа — её параметры (чаще всего координаты).

Строка с данными задаётся атрибутом d тега <path>. Она содержит команды, которые закодированы набором букв и чисел. Буква представляет тип команды, а числа — её параметры (чаще всего координаты).

Теперь мы запросто добавим к ссылочному тегу <a> псевдокласс: hover и зададим через него новый цвет svg-изображения. Это делается в CSS с помощью свойства fill («заливка»).

Проверьте, как это работает: наведите курсор на иконку — например, в песочнице Codepen.

И ещё один нюанс. Заливка может быть задана атрибутом у <svg> (fill=»#000″). Тогда работать с ней через CSS не получится, так как css-стили не могут перебить правила, заданные атрибутами. В этом случае стоит просто вручную удалить этот атрибут у <svg>.

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

iconmelon.com

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

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

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

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

flaticon.com

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

Что такое файл SVG?

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

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

Растр против вектора

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

Вы, наверное, знакомы с распространенными форматами PNG и JPEG. Это форматы растровой графики, что означает, что они хранят информацию об изображении в виде сетки цветных квадратов, также называемой растровым изображением. Квадраты на этом растровом изображении объединяются, образуя связное изображение, очень похожее на пиксели на экране компьютера.

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

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

Как работают файлы SVG

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

Давайте посмотрим на несколько примеров. Начну с рисования простого круга SVG:

Когда я открываю файл этого круга в текстовом редакторе, появляется этот XML-код:

Как видите, кода здесь не так много. Нам нужна всего одна строка кода, чтобы нарисовать круг. Это потому, что XML делает за нас большую часть работы с тегами. В приведенном выше коде теги показаны розовым цветом в угловых скобках.

Чтобы нарисовать круг, XML-код определяет форму с помощью тега , его положение с помощью атрибутов и с атрибутами cx и cy, радиус с атрибутом r и цвет внутри тега . # f4795b – это шестнадцатеричный код цвета для данного оттенка оранжевого.

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

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

Конечно, с векторами мы можем сделать гораздо больше, чем с простыми кругами. Давайте посмотрим на более сложное изображение, логотип звездочки HubSpot:

Этот простой значок состоит из 30 линий, соединенных 30 точками:

Откроем этот SVG-файл в текстовом редакторе:

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

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

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

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

Свой шрифт можно сделать, например, на сайте 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 на страницу?

Как подключить SVG к html-странице

Есть три варианта добавления векторной графики. У каждого свои показания к применению.

Через тег <img>

Здесь всё так же, как и с растровой графикой:

Минус этого способа в том, что взаимодействовать с внутренними элементами SVG не получится. Файл будет как за стеклом: смотреть можно, а вот трогать нельзя.

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

Через background

Как и в случае с растровой графикой, SVG можно подключать через css-свойство background:

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

Вставка svg-кода напрямую

Вставлять svg-код прямо в html-файл — это третий способ. И для нас самый интересный. Он позволяет не просто отображать готовую графику, но и менять её (толщину элементов, заливку, обводку и так далее).

Такая вставка выручает, когда при взаимодействии с картинкой нужно её визуально модифицировать — например, перекрасить svg-иконку при наведении на неё курсора.

Усложняем задачу

Рассмотрим более сложную ситуацию — когда иконка состоит из нескольких простых svg-изображений. Например, примитивная лупа из прямоугольника и круга:

Код для кнопки с иконкой лупы будет таким:

Проблема здесь в том, что внутри svg-иконки два разных тега:

• <rect> (прямоугольник — ручка лупы)
• и <circle> (круг — ободок лупы).

Сделать как в примере с «ВКонтакте» не получится, потому что прямоугольник в нашем случае имеет заливку (fill), а круг — обводку (stroke).

Чтобы при наведении менять цвет обоих, используем два селектора. Один будет менять заливку у палочки, второй — обводку у круга:

Как видите, при наведении на кнопку мы сперва нашли rect, потом circle, то есть разделили логику.

Делить код таким образом приходится нечасто, но помнить об этой возможности полезно.

Установка через 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

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

Иконки 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.