Ольга Гончарова, web дизайн

Формат SVG: резкий рост популярности.

 · 0 Comments

2019 год стал годом SVG.

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

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

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

SVG прост в использовании, и вам не нужно менять существующие файлы; просто добавьте новые изображения уже в формате SVG. 

SVG создан для Интернета

Mozilla описывает это следующим образом:

SVG – это язык, основанный на XML, для описания векторных изображений. Это, в основном, разметка HTML. Кроме того, есть много различных элементов для определения фигур, которые вы хотите отобразить в вашем изображении, и эффектов, которые вы можете применить к этим фигурам. SVG предназначен для маркировки графики, а не контента. В самом простом случае – это элементы для создания простых фигур, например <circle> и <rect>. Более продвинутые функции SVG включают <feColorMatrix> (преобразуют цвета с использованием матрицы преобразования), <animate> (анимационные части вашей векторной графики) и <mask> (применение маски поверх изображения).

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

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

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

Как дизайнеры используют SVG

Одним из преимуществ SVG является то, что его можно использовать для множества разных задач. SVG можно использовать для создания:

  • Логотипов
  • Фонов, узоров и текстур
  • Анимации
  • Адаптивных изображений
  • Иконок
  • Графиков и карт

Дизайнеры могут использовать SVG для любого элемента в дизайне, где применим векторный формат. Он вполне может заменить JPG, PNG и GIF.

Правило векторных форматов

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

Что особенно приятно в работе с изображениями SVG, так это то, что вам не нужно менять рабочий процесс для их реализации. Если вы используете программное обеспечение, такое как Illustrator или Sketch, ваш рабочий процесс, кроме конечного экспорта, будет абсолютно таким же, как и раньше. Большим плюсом SVG является возможность отображать текстовые блоки как текст, не переводя их в кривые. То есть любая надпись на вашем изображении может оставаться текстом, который можно легко изменить. Однако если используется шрифт, у которого нет веб-версии, лучше переведите надписи в кривые.

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

Есть несколько полезных советов по рисованию элементов и сохранению SVG-файлов наилучшим образом: 

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

2. Чтобы ваши SVG были как можно меньше, вам действительно стоит удалить что-либо ненужное. Самый известный и лучший инструмент для публикации SVG – это SVGO . Он удаляет весь код, который не нужен, но не забывайте быть осторожным при использовании его, если вы планируете редактировать файл с помощью CSS / JS. Иногда этот сервис может чрезмерно оптимизировать вашу работу. 

3. Также мы можем сделать еще один шаг в «устранении чего-либо ненужного» в графическом редакторе. Вы должны объединить и упростить все, что можете, особенно удалить как можно больше точек со своих путей. Верный помощник –  VectorScribe, плагин Illustrator, который имеет в своем составе aSmart Remove Brush Tool, позволяющий удалять точки, сохраняя при этом общую форму. Или же попробуйте использовать родные инструменты Ai – smooth tool или simplify:

4. Затем вам стоит увеличить масштаб и включить Pixel Preview (Illustrator) и посмотреть, где находятся точки. Они должны находиться на пиксельной сетке, в местах пересечения пикселей. Если это не так, то стоит поправить их координаты. Это займет немного времени, но это обеспечит самый четкий рендеринг.

В последних версиях Illustrator в правом верхнем углу есть автоматическая привязка к пиксельной сетке (align selected art to pixel grid), так что есть смысл включать ее перед началом работы. Но и готовую работу можно поправить с помощью этого инструмента. И все-таки проконтролируйте результат с помощью того же Pixel Preview, а при необходимости исправьте руками то, с чем инструмент не справился.

 

5. Перед сохранением файла убедитесь, что его размер целопиксельный (т.е. НЕ 23.3px × 86.8px ), в противном случае файл может быть нечетким. Вы можете сделать это в Illustrator с помощью Object > Artboards > Fit to Artwork Bounds. Затем нажмите save as , выберите SVG и используйте настройки по умолчанию. Еще здесь вы можете сделать некоторую оптимизацию, или посмотреть итоговый код:

Текстовый формат SVG удобен для SEO

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

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

SVG – легкий

В отличие от некоторых других векторных типов файлов, которые могут быть очень быстрыми, SVG – это код. Код быстрый. А код – это так просто. Ну, почти:) 

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

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

Легкое редактирование

Если вы используете для рисования иконок или логотипов векторные редакторы, то в процессе редактирования SVG для вас ничего не изменится.

Но если вы пишете код SVG, то вы получите массу удовольствия! Просто измените слово, или координаты, или цвет в текстовом редакторе и Бум!, это изменение произошло. Трудно сделать редактирование еще проще!

Создание неподвижных или анимированных изображений с помощью SVG

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

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

Заключение

Самая главная причина, почему 2019 год стал годом SVG – это универсальный (удобный и быстрый) формат.

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

И вы можете буквально прямо сейчас начать использовать SVG-изображения.

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

Будущее SVG только начинается. В качестве принятого формата мобильного изображения (и стандарта) использование и развитие SVG будет продолжать расти.

Согласно W3C, «в настоящее время разрабатывается SVG 2, куда будут добавлены новые функции, а также более тесная интеграция с HTML, CSS и DOM».

Источник: материалы сайта  Design shack