Css svg icon font

SVG-иконки

Адаптивный дизайн — популярная тема. Экраны давно вышли за пределы стандартных разрешений, и сайты могут смотреть и на девайсах размером с ладонь, и на больших мониторах. Сайт должен одинаково хорошо выглядеть вне зависимости от размера устройства и плотности пикселей. Для адаптации дизайна и контента существует много разных методик и технологий. Векторная графика, SVG, по-моему, одна из самых интересных тем в этом направлении.

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

Вот, например, один SVG-спрайт в 4-х разных размерах, исходный — 32px:

SVG отлично справляется с этой задачей и хорошо подойдет для использования в адаптивных раскладках.

Иконки для дизайна можно взять из готовых наборов или нарисовать свои.

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

iconmelon.com

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

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

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

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/. Примерная последовательность действий:

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.

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

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

Спрайт

.icon  background-image: url(your.svg); >

• короткий читабельный код;
• картинка кешируется;
• хорошая поддержка браузерами: все, кроме Оперы на Presto и старых IE.

• запрос к серверу;
• в старых Операх фоновый 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,<svg xmlns=. "); >

• нет запроса к серверу;
• относительно читабельный код (можно прочитать или отредактировать);
• не требует раскодирования;
• поддерживается всеми современными браузерами, если закодировать SVG.

• не кешируется;
• длинная строка в CSS;
• иконки недоступны для стилей страницы;
• поддерживается только браузерами на Webkit.

Use (переиспользование SVG-элементов)

svg width="48px" height="48px" viewbox="0 0 32 32"> use xlink:href='#d'/> svg>

• читабельный код;
• картинкам можно добавить title и desc ;
• символы доступны для стилей страницы. Также можно задать иконкам fill=»currentColor» , и они будут краситься вместе с текстом.

• вставляется непосредственно в HTML. Перед использованием элементы должны быть объявлены вверху страницы в инлайновом SVG. Возможно, есть более изящный способ подключения библиотеки элементов, мне не удалось найти.

Шрифт

.icon  content: "\6c"; font-family: 'icomoon'; >

• удобный код;
• единственный из способов поддерживается в IE8 без фолбеков;
• иконки доступны для стилей страницы, и будут краситься вместе с текстом.

• если шрифт не загрузился (ещё не загрузился, вообще не загрузился или уже выгрузился), вместо иконок будут буквы или символы юникода или ничего.

Живой пример с поддержкой браузерами:

Пример представлен как есть, без попыток обеспечить совместимость с разными браузерами. Вы можете открыть демо в интересующем браузере и посмотреть как в нем поддерживаются разные способы.

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

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

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

.icon  background-image: url(your.png); /* PNG для IE6-8 */ background-image: url(your.svg), none; >

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

doesnotexist:-o-prefocus, .icon  background-image: url(your.png); >

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

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

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

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

Сайдбар

Статьи

• Математические функции в CSS
• Адаптивное видео с помощью встроенных математических функций CSS
• Недоступность в картинках
• Единицы размеров в CSS
• Генератор цветовых тем
• Jekyll → Gatsby
• Вариативные шрифты
• Размеры в SVG
• Адаптивный Pixel Perfect
• Логотип не отвечает или временно недоступен
• SVG-паттерны
• Мыльные пузыри на SVG
• SVG-градиенты
• Весёлая консолька
• SVG-маски
• Умная прокрутка со Scroll Snap Points
• CSS-анимации для ротации изображений
• Анимированные SVG-маски
• Странности обводки в SVG
• SVG-прелоадеры
• Анимируем градиенты ещё раз
• Background-blend-mode
• Возможности оформления SVG
• CSS и SVG маски
• Nth-child и nth-of-type
• SVG-иконки
• SVG: заливка и обводка
• SVG-path
• SVG: группировка и переиспользование элементов
• SVG-фигуры и трансформации
• SVG
• СSS-градиенты и 3D
• Рисовалка анимированных теней
• Свежие CSS-паттерны
• CSS-паттерны
• Радиальные градиенты
• Линейные градиенты
• Крестики-нолики на CSS
• Border-image
• Электронные часы на CSS и JS.
• Сколько весят селекторы?
• Символы юникода
• Свойство content
• Анимируем CSS-градиенты
• Текстовые эффекты
• Древовидный список на CSS
• Css-селекторы, часть 2
• Css-селекторы
• Контекст наложения
• Два способа «прошить» элемент по краю
• Box-sizing
• Цвета в CSS
• Фон под строчками: добавляем поля
• Box-shadow
• Css-фигуры: лепесток
• Transform
• Css Animation
• 3D-куб
• Border-radius
• First letter
• Эти глаза напротив
• CSS-фигуры
• Стрелки с помощью свойства border
• Flexbox

Страницы

Проекты

Источник

Web Fonts vs SVG

Web Fonts have been used since the earliest days of Font Awesome and are still a solid workhorse. SVG is the new kid on the block with lots of extra tricks and capabilities. Which one is right for you?

Remove ads with a Pro plan!

A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.

And of course Pro-level plans come with…

Get Font Awesome Pro for only $99/yr

Icon web fonts are just that — fonts that are made up of icons. We pair the icon font with CSS to get all the magic of Font Awesome icons to show up seamlessly in your apps, sites, and other web projects.

Superpowers:

• Easiest to set up and use
• Reliable and established technology
• Can be used in pseudo-elements in CSS to display the icon without touching HTML
• Each icon can be referenced by its unique unicode value
• Batched into subsets to improve performance

Remove ads with a Pro plan!

A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.

And of course Pro-level plans come with…

Get Font Awesome Pro for only $99/yr

SVGs are vector-based images that are rendered using the browser’s engine. We pair it with javascript to invoke the magic of Font Awesome icons into your apps, sites, and other web projects.

Superpowers:

• Great for javascript-based apps when rendered through our JS packages
• Capable of some fancy tricks like masking, layering, and power transforms
• Uses the power of vectors to draw crisp icons at any size
• Easier to create custom subsets with just the icons you need

• Doesn’t come with any native rendering unless paired with our JS
• Can bog a browser down when many icons are used on a single page (but you can fix this with SVG symbols if you’re using repeating icons)

Remove ads with a Pro plan!

A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.

And of course Pro-level plans come with…

Get Font Awesome Pro for only $99/yr

Feature/Option	Web Fonts & CSS	SVG & JS
How Icons Render	As CSS pseudo-elements.	As SVG elements in your page’s HTML.
Best For	People who are used to Font Awesome’s older versions. Projects where HTML markup can’t be modified and icons must be added using CSS pseudo-elements (:before)	People who prefer to use SVGs to display icons. People who want to use advanced features like Power Transforms.
Upgrading Difficulty (from v4)	Similar file structure and framework as Version 4. Shim available to map v4 icon names to v5 equivalents.	Different files and references needed. Some rendering proofing is needed. Shim available.
Requirements	CSS and a browser that supports web fonts (leveraging @font-face).	CSS, JavaScript, and a browser that supports rendering SVGs.
Icon Sizing	Supported	Supported
Icon Rotating	Supported	Supported
Listed, Bordered, and Pulled Styling	Supported	Supported
Icon Animations	Supported	Supported
Stacking Icons	Supported	Supported
Auto-Accessibility	Not supported (except when using kits)	Supported
Power Transforms	Not supported	Supported
Masking	Not supported	Supported
Layering Text and Counters	Not supported	Supported

Go Make Something Awesome

Font Awesome is the internet’s icon library and toolkit used by millions of designers, developers, and content creators.

Источник