Мы часто встречаем такие форматы, как JPG, PNG и GIF, которые используются как на сайтах, так и в социальных сетях. Они получаются путем создания растровой графики – это фотографии, скриншоты, различные анимированные файлы. Вместе с этими форматами есть еще много похожих, один из которых – SVG.
Он также используется для отображения графики, но только не растровой, а векторной.
Что такое SVG
SVG (от англ. Scalable Vector Graphics – масштабируемая векторная графика) – это один из видов графики, который формируется с помощью геометрических объектов: линий, кругов, прямоугольников, кривых и прочих элементов.
Совокупность таких деталей может выдать практически любое изображение. Например, это может быть иконка социальной сети Instagram:
Толчок развития данной языковой разметке впервые был дан Консорциумом Всемирной паутины (World Wide Web Consortium), который в 1999 году был более известен как W3C. W3C дал и понятие SVG – языковая разметка для создания двухмерных графических интерфейсов и изображений.
Сегодня SVG используется на всех современных сайтах – это могут быть как иконки социальных сетей, так и полноформатные иллюстрации. Но чаще всего это именно логотипы, различные иконки.
Почему так популярен формат SVG – разберемся далее.
Достоинства SVG
Одна из ключевых особенностей формата SVG – это масштабируемость. Если увеличение фотографий в JPG и PNG может привести к ухудшению качества, то с форматом SVG все будете оставаться на прежнем уровне. Вы можете увеличить векторное изображение хоть в 100 раз – оно все равно сохранит прежний вид. Поэтому SVG-картинки хорошо отображаются в самых больших разрешениях без потери качества и просто идеальны для адаптивных сайтов.
Другая особенность SVG – это его кастомизация. Предположим, что нам на сайт нужно загрузить красную иконку, но под рукой есть только черная. Если это растровое изображение формата JPG или PNG, то потребуется приложить немало усилий, чтобы поменять цвет иконки. В случае с SVG достаточно открыть графический редактор, поддерживающий векторные изображения, например Figma, и поменять цвет иконки в один клик. Так, будто вы меняете цвет простому элементу.
Также SVG-изображение можно открывать в HTML и CSS, а это значит, что мы можем напрямую через код изменять как сам объект, так и его цвет.
Все эти достоинства закрепляет вес файла – он будет на порядок меньше любого растрового изображения при равных характеристиках изображения. Вдобавок к этому векторное изображение можно легко анимировать при помощи JavaScript, что проблематично сделать с обычной картинкой.
Недостатки SVG
Как таковых недостатков у SVG нет, но есть некоторые моменты, о которых стоит знать:
- SVG не может быть использован для фотографий. В теории вы можете получить фотографию в формате SVG, но такой файл будет очень большим. Кроме того, файл останется тем же растровым изображением, которое будет покрыто оболочкой SVG.
- Не поддерживается старыми браузерами.
В общем, SVG-формат – это наилучший вариант для использования иконок, анимированных элементов и иллюстраций на сайте.
Базовые формы SVG
Каждый SVG-файл может состоять из таких элементов, как:
- простая линия;
- ломаная линия;
- прямоугольник;
- окружность;
- эллипс;
- многоугольник.
Все эти фигуры могут быть использованы как поодиночке, так и в совокупности, создавая любое полноформатное изображение: человека, города, пейзажа. Посмотреть, как могут выглядеть различные векторные изображения, вы можете тут.
Где работать с SVG-графикой
Как я уже упоминал выше, в качестве программы для редактирования векторного изображения может быть использована Figma. В ней можно не только изменить уже существующий SVG-файл, но и создать собственный с нуля. Для этого есть такие инструменты, как перо, квадрат, линия, стрелка, эллипс, треугольник и звездочка.
Также можно использовать плагины, которые создают различные элементы. Например, с помощью Shaper можно в один клик добавлять необычные фигуры:
Любую из этих фигур можно легко экспортировать в формате SVG:
Это лишь один из способов создания SVG-элемента. В целом, Figma не предназначена для профессионального редактирования векторных изображений, обычно она используется для создания макетов и интерфейсов сайтов, в которых есть SVG.
Если говорить о профессиональном ПО, то это:
- CorelDraw – самый популярный графический редактор среди любителей, начинающих профессионалов и продвинутых художников.
- Adobe Illustrator – мировой стандарт для отрасли полиграфии. Именно Illustrator позволяет качественно переносить изображения из компьютера на бумагу или любой другой носитель. Предусмотрен уровень масштабирования до 64000%.
- Gravit Designer – полнофункциональный векторный редактор. Он подходит для любых задач – от дизайна интерфейсов и иконок до работы с презентациями, иллюстрациями и анимацией.
Также на просторах интернета вы можете найти много бесплатных сервисов для быстрого редактирования SVG-файлов.
Поддержка браузерами
SVG-формат поддерживается всеми современными браузерами, за исключением Internet Explorer 8. Но и это может быть исправлено использованием JavaScript-библиотеки Raphael.js. Конвертировать SVG-файл в формат этой библиотеки можно на сайте ReadySetRaphael.
Заключение
Сегодня мы поговорили о том, что представляет собой SVG-графика и где с ней можно работать. Ключевые особенности SVG – небольшой вес и масштабируемость, при которой качество картинки никак не изменяется.
Используйте SVG-графику на сайтах, чтобы минимизировать скорость загрузки страниц, а также улучшить восприятие контента пользователями. Элементы формата SVG легко адаптируются, могут изменять цвет при наведении мыши, а также хорошо подходят для различной анимации.
Комментарии