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

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

  1. Разделение представления

    Если хранить значки в том же файле шрифта, который используется для текста на сайте, то мы получаем минус один запрос при загрузке, но значки-пиктограммы нужно записывать в особую область шрифта (Private Unicode Area), которая в некоторых случаях подменяется другими символами и не поддерживается внекоторых устройствах. Также нужно обратить внимание, что некоторые браузеры не поддерживают @font-face (например Opera Mini).
    И если ваш шрифт не загрузился или недогрузился, то пользователи будут видеть непонятные символы виде квадратов с крестами на месте ожидаемой графики. Соответственно, для избежания подобных проблем, лучше использовать SVG или PNG.

  2. Разные технологии сглаживания в разных браузерах и ОС

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

  3. Сгенерированный контент

    Если мы используем шрифтовые значки, то, соответственно, нужно вставлять код символа в контент или использовать свойство content, а это – не всегда возможно. Например, когда псевдо-элементы :before и :after уже используются для других целей или некоторые элементы не поддерживают добавления сгенерированного контента вообще (input).
    Таких проблем не возникает с картинками.

  4. Меньше проблем с позиционированием

    Если использовать шрифтовые значки, то часто возникают неточности и смещение картинки значка относительно контента. Причем эти проблемы возникают в разных браузерах в разных случаях, и сложно их исправлять кросбраузерно, не прибегая к хакам с line-height или абсолютным\относительным позиционированием.
    С картинками SVG все намного проще, можно использовать background-size: cover и одинаково изменять размер и позицию в разных браузерах.

  5. Разноцветные значки (а не одноцветные)

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

  6. Возможность анимации

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

  7. Шрифт это не формат для изображений

    Только у меня возникает ощущение, что шрифтовые значки – это способ сделать проще, то что делается другим стандартным способом? А это обычно называется хаком (hack).
    Конечно, можно разводить полемику. Что символ в шрифте это векторное изображение, а значит его можно делать любым. Но это векторное изображение имеет четкое предназначение – отображать конкретный символ.
    Но и тут можно поспорить, что такое символ и зачем он нужен. Думаю, очевидно, что разные инструменты, предназначенные для разных вещей, могут использоваться в одних и тех же процессах, но это не делает их назначение другим.

Преимущества font-face для значков

Использование шрифтов для значков дает огромное удобство в работе с их цветами – всегда очень просто изменить цвет шрифта. Очень просто изменять отображение значка в соответствии с состояниями элемента (например :hover, :focus). Также у font-face лучшая кросбраузерная поддержка, по сравнению с SVG.

На сколько критичны эти преимущества? Тут конечно все неоднозначно. Но в большинстве случаев этими плюсами шрифтов можно пренебречь.

Например, добавив в SVG-спрайт еще несколько копий одного и того же объекта, но разных цветов, мы получим абсолютно не значимое изменение в размере. Gzip-сжатие, которое используется в 99% случаев, добавит несколько десятков байт к файлу без копий (обычно это 1-3%). Напомню SVG основан на XML, а это – обычный текст, который прекрасно сжимается.

А использования различных техник составления спрайтов упрощают работу с background-position (пример).
Но уже скоро можно будет использовать SVG Fragment Identifiers, чтоб избавиться от одинаковых объектов в спрайте.

Что же касается кросбраузерности, то основная проблема – IE8. Достаточно просто сохранить вместе с SVG еще и PNG копию файла и добавить отдельный CSS для IE8 или продублировать декларацию свойства background файлом PNG перед SVG. В автоматизации этого процесса может помочь Grunticon.

Можно сделать вывод – что лишь в особых случаях использование шрифтов для значков оправданно.

Рекомендации по написанию HTML-кода начинающим web-разработчикам

Очевидные вещи, которые выделил для себя. Хотелось бы, чтоб грамотные люди дополнили этот небольшой список. Цель – сделать код и свой, и других – более красивым, валидным, легко понимаемым и семантически грамотным.

Использование тега <br />

В основном это бывает нужно, для улучшения восприятия текста, точнее для форматирования одного элемента. Поэтому, когда нам нужно разделить несколько элементов или просто, чтоб новый элемент был в новой строчке, нужно использовать блочный элемент (div, p, h1…, у которых по умолчанию css-свойство display:block, но при этом, старайтесь не плодить лишних элементов). И если нужно сделать отступ, не нужно вставлять десять <br>, а нужно описать в css свойство margin.

Использование атрибута style и свойство !important

Это нужно в исключительных случаях, когда место уникальное. Почти всегда нужно использовать css-класс со свойствами вынесенными в css-файл. И даже если вам нужно спрятать элемент (display:none), лучше создать универсальный класс, (например css: .hidden {display:none;}), и писать <span class=”error hidden”>.
В описании класса, если у вас не применяется какое-то свойство, не нужно писать !important, чаще всего достаточно впереди дописать родительский селектор, и желательно – class, а не id.

Устаревшие элементы и атрибуты HTML

<CENTER>, <FONT>, border, color, cellpadding, cellspacing, width (для таблиц)
Все они заменяются свойствами в CSS, поэтому не используйте вышеперечисленные элементы. Также, атрибут name для XHTML не валидный – его не нужно использовать (все делается через id).

Элемент <label>

Специально, чтоб описывать назначение инпута есть элемент <label> (в HTML5 для этой цели можно использовать атрибут placeholder). Поэтому везде, где есть input, почти всегда, должен быть <label for=”input_id”>.

Неразрывный пробел и перенос слов

Старайтесь предвидеть возможность переноса слов и, где это нужно, используйте &nbsp; чтобы предотвратить разрыв. Если контент динамический и нужно держать его одной строчкой, можно использовать css-свойство, которое предотвращает перенос слов в новую строку – white-space:nowrap;

Расположение кнопок

Справа должна быть наиболее вероятная для нажатия кнопка. (Например 1.Cancel 2.Ok), это не относится к выводу информации – впереди должно быть самое важное. Но поскольку пользователь проверяет все возможные действия, то не нужно заставлять его возвращаться назад, даже взглядом.

Названия колонок, кнопок, действий

Старайтесь придерживаются правила – отдельный элемент – новое предложение и соответственно – пишите его с заглавной буквы (Submit, Order now). Также не нужно писать целиком заглавными слово, предложение или абзац. Если это нужно, есть css-свойство text-transform:uppercase;

Подчеркивание и выделение

Не подчеркивайте никакие элементы кроме ссылок. Для выделения используйте <strong>, <em> с соответствующими им css-свойствами font-weight:bold, font-style:italic или изменяйте сам шрифт. Если семантически фрагмент не выделяется, а только визуально, используйте <span>.

Сюда не вошли, может, более очевидные вещи, такие как форматирование или как выбирать названия для id элементов, но это относиться, на мой взгляд, к стилю, а не к культуре написания кода. CSS может и не нужно всем знать досконально, но структуру HTML-документа должны понимать все разработчики.


Надеюсь, данная заметка будет полезна и дополнена/исправленна Вашими коментариями.