Что такое SVG.js

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

Подключение библиотеки

Для использования SVG.js достаточно подключить библиотеку через CDN или установить её через npm:

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.1/dist/svg.min.js"></script>

Или через npm:

npm install @svgdotjs/svg.js

После подключения библиотека становится доступной через глобальный объект SVG.

Создание контейнера SVG

Первым шагом является создание корневого элемента SVG. В SVG.js для этого используется метод SVG():

const draw = SVG().addTo('body').size(600, 400);

Здесь addTo('body') добавляет элемент SVG в DOM, а size(600, 400) задаёт ширину и высоту холста. draw — это объект, с которым будут производиться все последующие операции.

Основные фигуры

SVG.js позволяет создавать базовые геометрические формы с помощью соответствующих методов объекта draw:

// Прямоугольник
const rect = draw.rect(100, 50).attr({ fill: '#f06' });

// Круг
const circle = draw.circle(80).attr({ fill: '#0f6' }).move(150, 50);

// Эллипс
const ellipse = draw.ellipse(120, 80).attr({ fill: '#06f' }).move(300, 50);

// Линия
const line = draw.line(0, 0, 200, 200).stroke({ width: 2, color: '#000' });

// Полигон
const polygon = draw.polygon('50,0 100,50 50,100 0,50').fill('#ff0');

// Путь
const path = draw.path('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80').fill('none').stroke({ color: '#000', width: 2 });

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

Атрибуты и стили

Метод .attr() позволяет задавать любые SVG-атрибуты. Например:

rect.attr({
  x: 50,
  y: 50,
  rx: 10, // скругление углов
  ry: 10
});

Для изменения стилей можно использовать метод .fill(), .stroke(), .opacity():

circle.fill('#ff0000').stroke({ color: '#000000', width: 3 }).opacity(0.5);

Трансформации

SVG.js поддерживает трансформации: перемещение, масштабирование, поворот и наклон. Трансформации применяются через методы .move(), .scale(), .rotate(), .skew():

ellipse.move(200, 100).rotate(45).scale(1.5, 0.5);

Эти методы позволяют комбинировать несколько трансформаций одновременно.

Группировка элементов

Для упрощения управления сложными композициями используется группировка:

const group = draw.group();
group.add(rect);
group.add(circle);
group.move(50, 50);
group.scale(2);

Группы позволяют применять трансформации и стили ко всему набору элементов одновременно.

Работа с текстом

Создание и стилизация текста осуществляется методом .text():

const text = draw.text('Пример SVG.js')
  .font({ size: 24, family: 'Arial', anchor: 'middle', weight: 'bold' })
  .move(300, 200);

Метод .font() управляет шрифтом, размером, выравниванием и стилем текста.

Анимации

SVG.js предоставляет встроенный механизм анимации через метод .animate():

rect.animate(2000, '<>').move(300, 200).fill('#00f');

Здесь 2000 — длительность анимации в миллисекундах, <> — кривая ускорения и замедления (easing). Анимации могут быть последовательными или циклическими, поддерживается цепочка вызовов для сложных эффектов.

События

SVG.js позволяет работать с событиями DOM на SVG-элементах:

circle.click(() => {
  circle.fill('#ff0');
});

rect.hover(
  () => rect.stroke({ color: '#00f', width: 4 }),
  () => rect.stroke({ color: '#000', width: 2 })
);

Методы .click(), .hover(), .mousedown() и другие позволяют легко обрабатывать взаимодействие с пользователем.

Работа с изображениями

В SVG.js можно добавлять растровые изображения в SVG-контейнер:

const image = draw.image('example.png').size(200, 150).move(50, 50);

Методы .size() и .move() управляют размерами и положением изображения.

Дополнительные возможности

  • Маски и клиппинг — метод .maskWith() и .clipWith() позволяют создавать сложные эффекты обрезки.
  • Градиенты и узоры — методы .gradient() и .pattern() обеспечивают заливку сложными градиентами или повторяющимися узорами.
  • События Drag & Drop — через расширения можно реализовать перетаскивание объектов.

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

Оглавление