SVG

SVG

SVG (Scalable Vector Graphics) — это один из форматов векторной графики, которая, в отличие от растровой, имеет одно большое преимущество: она не меняет свое качество и четкость при изменении размера. Дословная расшифровка аббревиатуры — «масштабируемая векторная графика» — как раз и отражает данное преимущество.

Особенность SVG-формата

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

Простые SVG-иконки на тему праздника от Unblast. Источник

Достоинства SVG

Ключевой характеристикой данного формата является его масштабируемость. Что это означает? При увеличении изображений растрового формата, например JPG или PNG, происходит ухудшение качества: картинка может размываться или на ней становятся видны пиксели. Сохраненное в формате SVG изображение можно увеличить хоть в десятки раз — его качество останется прежним. Таким образом, одним из преимуществ SVG-формата можно считать его адаптивность под любую область размещения.

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

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

Коллекция иконок на летнюю тематику от Yassmin Moghazy. Источник

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

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

Коллекция векторных иконок от Sebastian Abboud. Источник

Количество инструментов, работающих с SVG-форматом, не ограничивается одним Adobe Illustrator. Среди программ, которые дизайнеры выбирают для работы с SVG-графикой, можно найти как платные, так и высококачественные бесплатные продукты: Autotracer, Vector Paint, SVG-Edit, Figma и многие другие.

Недостатки SVG

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

Как подключить SVG к HTML-странице

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

Самый простой способ — использовать тег <img>. Он подойдет, если есть некое статичное сохраненное изображение. Надо понимать, что никакие скрипты или анимация в данном случае применимы не будут. Этот способ крепления картинки самый простой и требует лишь небольшого знания HTML-разметки. Выглядеть код будет примерно так:

<img src=«img_name.SVG» alt=«название_изображения»>

Этим способом удобно крепить простые элементы: схемы, графики, логотипы, простые иллюстрации, если они не требуют интерактива.

Сложные SVG-иконки от Premast и Yassmin Moghazy. Источник

Крепление через background или вставка фоновой картинки в CSS. Данный способ подходит для добавления подложек, то есть тех картинок, которые также не требуют взаимодействия со зрителем. Выглядеть подобный код будет следующим образом: 

.picture {

 background-image: url(img_name.SVG);

}

Для того чтобы «оживить» изображение, то есть применить необходимую анимацию, используется команда <object>. Стоит отметить, что работать интерактив будет, только если он прописан в самом SVG-файле. Вид кода в таком случае будет следующим:

<object type=»image/SVG+xml» data=»img.SVG»>

 <img src=»img.png» alt=«отображаемое имя»>

</object>

Нужно иметь в виду, что в случае с <object> изображениям предъявляются повышенные требования безопасности, поэтому просто вставить картинку «из интернета» не получится. 

Изометрические векторные иконки (псевдо-3D) от дизайнера alexdndz. Источник

Вставка SVG-кода напрямую представляет собой интеграцию в код не только изображения, но и его параметров, что позволяет управлять ими непосредственно из редактора. Такой способ вставки SVG позволяет менять элементы изображения, их параметры и цвет. Данный способ особенно удобен в случае, когда нужно добавить интерактив в изображение: например, «шевелить» логотипом при наведении на него курсора. Пример кода параметров, вставленного напрямую, можно найти ниже:

<SVG>

  <rect x=»15″ y=»10″ width=»120″ height=»120″ />

</SVG>

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

Как менять цвет SVG-иконки через CSS?

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

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

<a href=«https://site.ru/» class=”site”>

  <SVG id=»Bold» enable-background=»new 0 0 24 24″ height=»512″ viewBox=»0 0 24 24″ width=»512″

   xmlns=»http://www.w3.org/1000/SVG»>

   <path d=»m19.915 13.028c-.388-.49-.277-.708 0-1.146.005-.005 3.208-4.431 3.538-5.932l.002-.001c.164-.547 0-.949-.793-.949h-2.624c-.668 0-.976.345-1.141.731 0 0-1.336 3.198-3.226 5.271-.61.599-.892.791-1.225.791-.164 0-.419-.192-.419-.739v-5.105c0-.656-.187-.949-.74-.949h-4.126c-.419 

   0-.668.306-.668.591 0 .622.945.765 1.043 2.515v3.797c0 .832-.151.985-.486.985-.892 

   0-3.057-3.211-4.34-6.886-.259-.713-.512-1.001-1.185-1.001h-2.625c-.749 0-.9.345-.9.731 

   0 .682.892 4.073 4.148 8.553 2.17 3.058 5.226 4.715 8.006 4.715 1.671 0 1.875-.368 1.875-1.001 

   0-2.922-.151-3.198.686-3.198.388 0 1.056.192 2.616 1.667 1.783 1.749 2.076 2.532 3.074 

   2.532h2.624c.748 0 1.127-.368.909-1.094-.499-1.527-3.871-4.668-4.023-4.878z» />

  </SVG>

 </a>

При помощи тега path задается описание пути с использованием промежуточных координат. Параметр path d содержит команды в закодированном виде.

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

Другие термины на букву «S»

← Все термины

Медиа Contented
Добавить комментарий