Почему лучше использовать 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.

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

Leave a Reply

Your email address will not be published. Required fields are marked *


9 − 7 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>