Как проектировать, создавать и анимировать SVG

Это перевод статьи Сурбхи Оберой «How to Design, Code, and Animate SVGs».

Вы можете считать масштабируемую векторную графику (Scalable Vector Graphics — SVG) отзывчивой графикой. SVG основан на формате XML, который позволяет создавать изображение, используя определённые теги и атрибуты. Ваш код сгенерирует изображение, которое можно изменять прямо в текстовом редакторе.

Это пример SVG. Если посмотреть на его исходный код, то можно заметить, что он состоит из тегов и атрибутов так же, как и в HTML-документе. Все они находятся внутри тега <svg>. Здесь есть тег <rect>, рисующий прямоугольник с чёрной рамкой и белым цветом фона. И внутри него эллипс (почти что круг, но обратите внимание на атрибуты <ry> и <rx>), который залит красным цветом.

SVG в вебе можно использовать двумя способами. Например, использовать SVG-файлы в атрибуте src тега <img>. То есть мы получим <img src="japan.svg"> — точно так же, как с PNG или JPEG-изображениями.

Но более интересное использование заключается в том, что мы можем вставлять SVG напрямую в <div> внутрь HTML-кода. Мы можем стилизовать эти блоки (или даже группы таких блоков) как захотим. Можем использовать CSS, анимацию или даже добавить интерактивности с помощью JavaScript. Это то, что прямо сейчас делает SVG одним из самых универсальных и крутых элементов в HTML.

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

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

Векторные картинки против растровых

Растровые картинки состоят из пикселей, создающих целостное изображение. JPEG, GIF и PNG — самые распространённые типы растровых изображений.

Растровые изображения состоят из фиксированного числа пикселей, поэтому изменение размера картинки невозможно без влияния на её качество. Вы наверняка замечали, что изменение размера таких изображений делает их зернистыми и размытыми. Всё это происходит из-за фиксированного количества пикселей.

Вот что происходит при увеличении растрового изображения:

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

Один из самых распространённых вариантов использования векторных изображений — это иконки и анимация маленьких иконок. Они всегда будут чёткими даже на дисплеях с самой высокой плотностью пикселей, таких как новые 4K смартфоны.

Вот что происходит при увеличении векторного изображения:

SVG-теги

<svg>

Тег <svg> внедряет SVG-документ внутрь текущего документа, например, HTML. Тег имеет свои координаты X и Y, высоту и ширину, и свой уникальный id.

Вот как он может выглядеть:

<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">

<g>

Тег <g> группирует элементы вместе и ведёт себя как контейнер для связанных графических элементов. Элемент <g> также может содержать в себе другие элементы <g>, которые будут вложены в него.

Вот пример тега <g>:

<g>
  <title>background</title>
  <rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
    <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
  </g>
</g>

<rect>

Элемент <rect> представляет собой базовую фигуру SVG — прямоугольник. Он может иметь различные атрибуты, такие как координаты, высота, ширина, цвет заливки, цвет обводки и острые или закруглённые углы.

Вот пример тега <rect>:

<rect id="svg_1" height="253" width="373" y="59" x="107.5" stroke-width="1.5" stroke="#000" fill="#fff"/>

<use>

Элемент <use> позволяет клонировать и повторно использовать графические элементы SVG, в том числе такие элементы, как <g>, <rect>, а также другие <use> элементы.

Вот пример тега <use>:

<text y="15">black</text>
<use x="50" y="10" xlink:href="#Port" />

<text y="35">red</text>
<use x="50" y="30" xlink:href="#Port"/>

<text y="55">blue</text>
<use x="50" y="50" xlink:href="#Port" style="fill:blue"/>

<path>

Элемент <path> определяет путь, состоящий из координат точек для формирования фигуры. Код с использованием <path> может казаться магией, но не пугайтесь! В примере ниже код можно прочесть как:

1. «M150 0» — переместись на (150,0);
2. «L75 200» — нарисуй линию к (75,200) от предыдущей точки (которая имела координаты (150,0));
3. «L255 200» — нарисуй линию к (225,200) от предыдущей точки (которая имела координаты (75,200));
4. «Z» — закрой путь (нарисуй линию к начальной точке).

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

Вот пример тега <path>:

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

<symbol>

И, наконец, элемент <symbol> определяет символы, которые могут быть использованы повторно. Эти символы отрисовываются только при помощи тега <use>.

Вот пример тега <symbol>:

<svg>
  <symbol id="sym01" viewBox="0 0 150 110">
    <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red"/>
    <circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/>
  </symbol>
  <use xlink:href="#sym01" x="0" y="0" width="100" height="50"/>
  <use xlink:href="#sym01" x="0" y="50" width="75" height="38"/>
  <use xlink:href="#sym01" x="0" y="100" width="50" height="25"/>
</svg>

Создаём SVG

Есть множество доступных SVG-редакторов, например, Adobe Illustrator или Inkscape. Последний бесплатен и с открытым исходным кодом. Поскольку SVG-файлы это XML-код, то в крайнем случае вы можете написать его вручную.

Для этого примера я буду использовать простой онлайн-редактор. В нём вы можете создавать SVG без необходимости устанавливать что-либо ещё.

1. Для начала создадим круг.

   

2. Затем добавим больше кругов и сохраним исходный код.

   

CSS3-анимация

SVG может быть анимирован с помощью добавления атрибута id или class SVG-тегам, и последующей стилизации их в CSS. Так же, как и любой другой документ. Ниже приведён пример того, как может быть анимирован SVG.

See the Pen circles.svg by Leno_0 (@xCube) on CodePen.

CSS-анимация предлагает множество типов анимации, которые вы можете выбрать. Линейная анимация — это ещё один крутой атрибут SVG.

Для следующего примера я написала текст «Hi, I am Surbhi», используя инструмент «Pen» в редакторе. Затем я использовала ключевые кадры из CSS3 для создания анимации.

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

See the Pen name svg by Leno_0 (@xCube) on CodePen.

Анимационный тег <animate>

Внимание! Декларативная анимация в формате SMIL с помощью тегов <animate> не рекомендуется к использованию и, вероятно, будет удалена из браузеров в будущем (прим. редактора, 28 ноября 2019).

<animate> — это тег для создания анимации, встроенный в сам SVG. Он определяет, как атрибуты элементов изменяются от начальных до конечных значений в процессе указанной анимации. Это используется для анимации свойств, которые не могут быть анимированы с помощью CSS.

Основные элементы, которые анимируются этим тегом: цвет, движение и трансформация.

Тег <animate> вкладывается внутрь тега объекта, который должен быть анимирован. Он не работает для путей, состоящих из координат, а только внутри тегов, создающих объекты. Обратите внимание на атрибут additive. Он показывает, что анимации не переопределяют друг друга, а вместо этого работают одновременно.

Вот пример анимации SVG с помощью тега <animate>:

See the Pen name svg by Leno_0 (@xCube) on CodePen.

Анимация и интерактивность, основанная на JavaScript

Поскольку SVG — это просто документ с тегами, то мы можем использовать JavaScript для взаимодействия с отдельными элементами SVG, получая их при помощи селекторов (id или class).

Помимо стандартного JavaScript, есть множество JS-библиотек для анимации и взаимодействий с SVG: Vivus.js, Snap.svg, RaphaelJS и Velocity.js.

В следующем примере я использовала библиотеку Vivus.js вместе с jQuery, чтобы получить анимацию линий:

See the Pen javascript svg by Leno_0 (@xCube) on CodePen.

Почему нельзя использовать SVG для всех изображений?

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

Вот что я создала, пока изучала SVG, используя CSS и SVG без каких-либо дополнительных библиотек. Не судите строго!

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.