SVG

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

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

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

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

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

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

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

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

Количество инструментов, работающих с 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=«название_изображения»>

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

Крепление через 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> изображениям предъявляются повышенные требования безопасности, поэтому просто вставить картинку «из интернета» не получится. 

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

<SVG>

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

</SVG>

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

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

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

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

<a target="_blank" 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. А менять заливку и размер иконок можно не только в редакторе, но и прямо в коде на сайте.