Установка и подключение

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

Подключение через CDN

Наиболее простой способ начать работу с SVG.js — подключение через Content Delivery Network (CDN). Это не требует установки дополнительных пакетов и позволяет сразу использовать библиотеку в любом HTML-документе.

Пример подключения последней версии:

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

https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@4.2.0/dist/svg.min.js — ссылка на минифицированную версию библиотеки.
Версию можно изменять, чтобы использовать конкретную стабильную сборку.
После подключения объект SVG становится доступен глобально и позволяет создавать элементы SVG напрямую в коде.

Установка через npm или yarn

Для проектов с использованием сборщиков модулей (Webpack, Vite, Parcel) рекомендуется подключение через пакетный менеджер.

npm install @svgdotjs/svg.js

или

yarn add @svgdotjs/svg.js

После установки библиотеку можно импортировать в код Jav * aScript:

// Импорт всего модуля
import { SVG } from '@svgdotjs/svg.js';

// Импорт отдельных функций для уменьшения размера бандла
import { SVG, registerPlugin } from '@svgdotjs/svg.js';

Такой способ позволяет использовать современные возможности ES-модулей.
Поддерживаются Tree Shaking и оптимизация бандла.

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

Перед созданием графики необходимо подготовить контейнер <div> или <svg> в HTML:

<div id="drawing"></div>

Инициализация SVG.js для работы с этим контейнером:

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

SVG() создаёт корневой объект для работы с элементами SVG.
.addTo('#drawing') привязывает объект к существующему DOM-элементу.
.size(width, height) задаёт размеры холста в пикселях.

Контейнер может быть и существующим элементом <svg>:

<svg id="mySVG" width="500" height="300"></svg>

const draw = SVG().addTo('#mySVG');

Подключение дополнительных плагинов

SVG.js поддерживает расширение функциональности через плагины. Их подключение может быть выполнено аналогично основному модулю:

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

После подключения плагины автоматически регистрируются и становятся доступными через API:

draw.rect(100, 100).fill('red').filterWith('blur', 5);

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

Проверка работоспособности

Чтобы убедиться, что библиотека подключена корректно, достаточно создать простой элемент и отобразить его:

const circle = draw.circle(100).fill('blue').move(50, 50);

Элемент circle создаёт окружность радиусом 100 пикселей.
.fill('blue') задаёт цвет заливки.
.move(x, y) позиционирует элемент на холсте.

Если элемент отображается в браузере — подключение выполнено успешно.