Иконки SVG - это не «устоявшаяся наука»

Это перевод нескольких абзацев статьи Джордана Бреннана от 3 января 2020 года в сообществе Dev.to, давайте прочитаем.

Кажется, что каждый год с тех пор, как в браузере появилась поддержка SVG, появлялась статья «Сейчас [текущий год], вы должны использовать значки SVG», и каждый год я устно объясняю, почему я думаю, что вам не следует этого делать. Это новый год, так что я пойду вперед и запишу это в первый и последний раз ;)

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

Я буду сравнивать, как пользователи воспринимают значки SVG и значки шрифтов, и как разработчики создают, поддерживают и используют набор значков SVG и значки шрифтов.

Иконки, пользовательский опыт

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

Единственное исключение между визуальным паритетом SVG и значков шрифтов — это когда IE не могло правильно визуализировать SVG, если пользователь слишком сильно увеличивает масштаб. Очевидно, это крайний случай IE, и IE в значительной степени ушел. Я также однажды видел, как Chrome обрезал 1 пиксель только для одного значка шрифта из набора из более чем 100 значков. Так и не понял. Думаю, это ничья, но я не думаю, что ни одна из этих ошибок браузера заслуживает внимания.

Что касается доступности, в элементе SVG нет ничего полезного для программ чтения с экрана. И значки SVG, и значки шрифтов должны использовать одни и те же атрибуты ARIA: aria-label="phone icon" или aria-labelledby.

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

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

Опыт разработчиков

Давайте сразу перейдем к коду!

Значок SVG (посмотрите, чтобы увидеть всю красоту)

Ух ты! Ни один разработчик не посмеет кодировать один из них, не говоря уже о целом наборе.

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

Один из способов — поместить каждый фрагмент значка SVG в небольшой частичный файл шаблона и импортировать их там, где это необходимо. Это несложно сделать при рендеринге на стороне сервера, но усложняется при попытке упаковать и визуализировать их на стороне клиента. Преобразование их в компоненты JavaScript, обычно с помощью React, — это статус-кво. Этот подход добавляет зависимость и увеличивает полезную нагрузку, около 40 КБ в случае React, что определенно влияет на скорость страницы. Я подробно рассмотрю этот подход позже, потому что он наиболее распространен.

Можно избежать записи всех этих path данных и необходимости JavaScript, включив фактический .svg файл с помощью `илиbackground-image: url(«phone.svg»)`. Они работают, но создают плохой побочный эффект UX, потому что каждый значок загружается отдельно, что означает, что они появляются на странице случайным образом по мере завершения загрузки.

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

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

Хорошо, теперь очередь за иконочными шрифтами.

Шрифт значка

Это действительно просто. Разработчики могли кодировать их весь день. Рендеринг на стороне сервера или на стороне клиента нет никакой разницы.

Это может выглядеть немного иначе, чем реализации шрифтов значков на основе классов, которые вы видели или с которыми работали в прошлом. В этом подходе используется собственный HTML-тег, и в этом нет никакого волшебства! Никаких зависимостей, никакого JavaScript, никакого дыма и зеркал. Это простой CSS и файл шрифта:

@font-face {
  font-family: "icons";
  src: url("icons.woff2") format("woff2");
}

icon {
  font-family: "icons";
  display: inline-block;
}

icon[name="phone"]:before { content: "e911" }

Меньше — больше

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

Против:

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

Другие преимущества значков шрифтов

Значки шрифтов имеют некоторые приятные преимущества, которых нет у значков SVG. Это:

• Автоматически соответствует цвету текста
• Автоматически соответствует размеру текста
• Автоматически соответствует высоте строки

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

Резюме

Значки шрифтов и значки SVG обеспечивают одинаковое визуальное восприятие пользователем, но значки шрифтов имеют небольшое преимущество в производительности. Оба одинаково доступны.

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