SVG для верстальщика: как с ним работать и что он умеет

Этот формат позволяет вставлять векторную графику на страницы. Преимуществ у такого подхода – масса: в векторных форматах нет размытия изображения при скейлинге, у векторных картинок больше возможностей для изменения изображения «на ходу», описанная форматом svg картинка зачастую весит около 1 килобайта. Ниже – о том, что это за формат такой, в чем его концептуальное отличие от растровых форматов, как им пользоваться на странице и как создавать свои SVG в формате XML. 

Что такое SVG?

Глобально есть 2 типа изображений: растровые и векторные. Растровая графика – это когда мы берем холст, размечаем его точками (пикселями), закрашиваем каждый пиксель в нужный цвет и получаем изображение. Растровой графикой пользуются тогда, когда нужно нарисовать что-то с большим количеством цветов, переходов и сегментов:

Форматы png и jpg – это как раз про растровую графику. Принцип построения векторных изображений отличается: изображение в основном состоит из геометрических фигур и линий, которые задаются кодом (директивами или функциями):

У такого подхода есть ряд явных преимуществ и недостатков. Из преимуществ:

• Очень маленький вес изображения. Даже самая простая jpg-иконка будет весить от 10 килобайт. Если код этой иконки состоит из 500 символов (что, на самом деле, для иконки очень много), вес изображения будет равен 0.5-1 килобайт.
• Масштабируемость. Поскольку изображение описано в коде (коде XML для SVG), браузерам очень легко это изображение масштабировать. Ширина основного блока равна 600 пикселей? Вставляем изображение в оригинальном размере. Ширина основного блока равна 1200 пикселей? Увеличиваем масштаб изображения вдвое и выводим. Поскольку изображение рисуем сам браузер, при удвоении ширины изображения не будет возникать никакой зернистости – у растровых картинок такой привилегии нет.
• Интерактивность. Поскольку SVG описывается с помощью разметки XML, вы с помощью JavaScript можете получить доступ к этому коду и каким-то образом динамически изменить его прямо во время выполнения страницы (когда пользователь с ней взаимодействует). В растровых изображениях это тоже возможно, но либо очень усеченно (канувшая в Лету флэш-анимация), либо с помощью специального формата – gif (и тут тоже не все так просто).

Из минусов:

• Практически невозможно создать детальное изображение. Посмотрите на 2 картинки выше. Поскольку SVG создается через редакторы кода, на воссоздание первого изображения у вас уйдут годы.
• Сложнее работать. Для того, чтобы создать сложное изображение, нужно пользоваться услугами редакторов SVG (например, Inkscape: https://inkscape.org/), и они устроены не так, как Paint/GIMP/Photoshop – вам придется разбираться с нуля.

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

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

Как вставить SVG на страницу?

Добавлять файлы на страницу можно 4-мя способами:

1. Как обычные изображение, через HTML. В страницу вставляется следующий код:

   <img src=”some_random_picture.svg” alt=”alt”>

   То есть, вы вставляете обычное изображение, только в формате SVG. За поддержку браузерами можете не беспокоиться – и SVG поддерживается без проблем, и SVG 2.0 будет поддерживаться без проблем, когда выйдет.
2. Стилями CSS. В этом случае SVG указывается как фоновое изображение:

   .picture_class { background-image: url(url_to_picture.svg); }

   Дает немного больше гибкости, чем вставка в HTML картинки, но имеет схожую с первым вариантом проблему, о которой мы расскажем ниже.
3. Вставка объекта. В этом случае графическому файлу дается метка «object»:

   <object type=”image/svg+xml” data=”path_to_picture.svg”> <img src=”backup_picture.jpg”> </object>

   Backup_picture.jpg нужна на тот случай, если по каким-то причинам браузер не хочет работать с SVG.
4. Вставка кода. Новый метод, который позволяет добавлять изображение сразу кодом:

   <svg width="50" height="50"> <circle cx="20" cy="20" r="40" stroke="yellow" stroke-width="6" fill="red" /> </svg>

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

У первых двух способов есть один недостаток – JS-скрипты на странице не могут получить доступ к изображению, то есть менять их на лету или делать анимацию средствами JS не получится. Но есть и плюсы: 1) изображения кэшируются; 2) очень просто использовать. У третьего и четвертого способа нет вышеописанных минусов, но и плюсов виде кэширования/простоты тоже нет.

Поэтому вариант вставки нужно подбирать по ситуации.

Как создавать свои SVG?

Варианты редактирования векторных изображений через специальные редакторы мы рассматривать не будем – в сети полно гайдов. Вместо этого мы рассмотрим базовые инструкции, с помощью которых можно создавать изображения. Синтаксис вы найдете в курсе по SVG, ссылка будет ниже. Протестировать свой код вы можете, к примеру, вот здесь: https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_myfirst.

Итак, базовые функции:

• Создание прямоугольника. Можно задавать начальные координаты, размеры, заливку, обводку и ее цвет, скошенные углы.
  
  
  
• Создание круга. Указываете начальную точку, радиус, заливку, обводку – получаете круг. По сути, круг – это квадрат с правильно скошенными углами.
  
  
  
• Создание эллипса. То же, что и создание круга, но нужно задать размеры по x и y. Эллипсы уже позволяют создавать нетривиальные дизайны, если их правильно расположить.
  
  
  
• Создание линии. Линии задаются очень просто – указываете по 2 координаты на точки начала и конца линии, указываете цвет – готово. Линии – один из основных элементов графики в SVG. Можно задавать параметры самих линий: сплошные или с прочерками, цвет, толщина и так далее.
  
  
  
• Конструкция полигона. Полигон – это многоугольник. Фактически полигон создается из нескольких линий (по крайней мере трех), последняя точка последней линии соединяется с первой точкой первой линии. Затем все это закрашивается. Из полигонов состоят 3D-модели, поэтому не недооценивайте их силы. Пример ниже создан всего одной командой:

  <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />

  
  
  
  

• Создание полилайна. Полилайн – это изломанная линия. Тоже создается одной строкой с указанием координат излома.
  
  
  

• Задание пути. А вот здесь начинается самое интересное. SVG поддерживает математические функции, позволяющие рисовать на экране различные искривленные линии. Чтобы создать изображение ниже, нужно написать 25 строк довольно сложного математического кода, поэтому для таких задач рекомендуется использовать специальные программы, рисующие векторную графику.
  
  
  

• Форматирование текста. Самое интересное здесь – параметр transform, который позволяет изменять расположение текста в блоке.
  
  
  

• Задание фильтров. К каждому объекту можно применять фильтры, у каждого фильтра – свой набор параметров. Фильтров – много, хватит на все случаи жизни. Основные фильтры: блюр (размытие), отбрасывание теней, градиенты.
  
  
  

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

<svg width="400" height="400">

<path xmlns="http://www.w3.org/2000/svg" id="Blue_1_" fill="#157DC3" d="M321.1,262.3c7.9,0,14.2-6.4,14.2-14.2V18.8c0-7.9-6.4-14.2-14.2-14.2H91.8 C84,4.6,77.6,11,77.6,18.8v229.3c0,7.9,6.4,14.2,14.2,14.2H321.1z"/>

<path xmlns="http://www.w3.org/2000/svg" id="f" fill="#FFFFFF" d="M255.4,262.3v-99.8h33.5l5-38.9h-38.5V98.8c0-11.3,3.1-18.9,19.3-18.9l20.6,0V45 c-3.6-0.5-15.8-1.5-30-1.5c-29.7,0-50,18.1-50,51.4v28.7h-33.6v38.9h33.6v99.8H255.4z"/>

</svg>

Результат:

Что почитать?

• Большой видеогайд по SVG: https://www.youtube.com/watch?v=Yzj8bBCq7Eg&ab_channel=%D0%9E%D1%820%D0%B4%D0%BE1.
• Уроки от w3schools: https://www.w3schools.com/graphics/svg_intro.asp.
• Полная, исчерпывающая документация по SVG от W3 консорциума: https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML. 

Вывод

• SVG – это векторная графика, использующаяся в вебе.
• В преимуществах формата: маленькие размеры файла, масштабируемость без потери качества, возможность изменять SVG-изображение JS-кодом (позволяет делать полноценную анимацию).
• Из минусов: формат сложен для освоения.
• Если хотите рисовать свои собственные SVG-картинки, лучше воспользуйтесь специальными редакторами – задавать сложные искривленные линии вручную, кодом, будет очень сложно.