Какие иконки использовать: svg или font

#svg #шрифты #icon

Я занимаюсь разработкой сайтов, дизайнов для них и скриптов довольно долго. И конечно
же, непосредственно, создание дизайна почти не обходится без добавление разнообразных
иконок, будь то иконка play или menu. 

В 2012 году для таких целей использовали, почти везде и у меня в том числе, иконки
картинками png, gif. Но, с нашими инновациями и усовершенствованием старых функций,
теперь большинство сайтов перешли на рисование иконок шрифтом (font) или же на svg.
Это позволяет сократить вес всех изображений и сделать их гибкими под разные размеры.

Но всё же, какие иконки лучше: svg или font? По моему мнению, лучше SVG, так как
легче в использовании и имеет собственные плюшки.

Какие иконки использовать: svg или font?
    

Ответы

Ответ 1

Svg потому что:


Это векторный формат.
Иконка может быть многоцветной.
Svg можно инлайнить в html и стилизовать при помощи css.
Css позволяет добавить некую интерактивность в иконку.
Svg можно анимировать.
Нет проблем со скринридерами.
Не возникает проблем, если по какой-то причине браузер использует дефаултный шрифт.


Ответ 2

После долгого использования шрифтов-иконок, перешел на SVG и понял, что конкретно
их различает по моему мнению:


Легкость в освоении и использовании - тут лучше шрифты с иконками, так как нет ничего
проще, вставить готовые конкретные названия иконок в CSS элемента, либо ещё проще,
установить библиотеку шрифтов и просто менять класс элемента.
Но теперь про функциональность и возможности - тут несомненно, как мне кажется, побеждает
именно SVG, потому что с ним можно делать множество трансформаций и анимаций.
Размер - собственно эти 2 технологии популярны тем, что занимают очень маленький
размер памяти, и оба хорошо справляются со своей задачей.
Что в итоге, мне кажется, что лучше все же SVG, так как он имеет больше возможностей
для дальнейшего его изменения, а потребляет примерно столько же ресурсов.


Ответ 3

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

Посмотрите мой пример. Я взял иконку из Font Awesome, выдернул ее из svg шрифта и
вставил в inline svg. Специально для минусующих я сделал ее Pixel-Perfect

Покрутите размер шрифта, чтобы убедиться, что шрифт сохраняет четкость при масштабировании
(что и не удивительно), a SVG хорош только на 14px и на достаточно больших размерах:



$('input').on("change click",function(){
$('p').css('font-size',$('input').val()+'px')
})
p {
  font-size: 16px;
}

svg {
  width: 1em;
  height: 1em;
}

.fa {
  font-size: 1em;
}





 - Это шрифт
 - Это SVG
 






Поскольку иконка сделана 14 на 14px а мне нужно 16px, я увеличиваю SVG и тут получается
размытая лажа. (Естественно, 14px выглядят одинаково хорошо, но в этом и дело, получается,
я не могу масштабировать SVG!) Никто не говорит, что SVG это плохо, SVG - это картинка
и ведет себя так, как вела бы себя картинка. 

А шрифт на мелких размерах, сохраняет читаемость благодаря хинтингу.

В SVG теряются детали, смазываются края, в общем, выглядит коряво. Конечно, всегда
есть возможность сделать "Pixel-perfect" SVG (располагать вектор ровно по пикселям),
чтобы картинка была четкой на нужном размере. Но тогда куда денется хваленая гибкость
вектора? Что если потребуется немного увеличить иконку? А что если дизайнер нарисует
вам кривой вектор?

Выходит SVG - это хорошее решение только для программиста. Для программиста, которому
плевать как выглядит конечный продукт. С другой стороны, если вы будете делать идеальные
"Pixel-perfect" иконки и не будете изменять их размер, SVG не будет хуже (но практика
показывает обратное)

И, кстати, SVG еще и медленнее отрисовывается.