Серверный рендеринг

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

Подготовка окружения

Для работы на сервере требуется Node.js. SVG.js полностью совместима с Node.js при использовании jsdom для эмуляции DOM:

const { JSDOM } = require('jsdom');
const { SVG } = require('@svgdotjs/svg.js');

// Создание виртуального DOM
const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
global.document = dom.window.document;
global.window = dom.window;

// Инициализация SVG.js
const draw = SVG(document.body);

Ключевой момент: на сервере отсутствует настоящий DOM, поэтому jsdom позволяет создавать виртуальный DOM, на который SVG.js может «рисовать».

Создание базового SVG-элемента

Для серверного рендеринга стандартная процедура создания SVG сохраняется:

const rect = draw.rect(200, 100).fill('#3498db').stroke({ width: 4, color: '#2c3e50' });
const circle = draw.circle(80).fill('red').move(50, 50);

Особенности серверного рендеринга:

  • Позиционирование элементов происходит так же, как в браузере.
  • Цвета и стили применяются через атрибуты SVG, которые можно сохранить в файл.
  • Методы .move(), .size(), .attr() работают идентично клиентской версии.

Экспорт SVG на сервере

После создания элементов важно получить строковое представление SVG для сохранения или отправки клиенту:

const svgString = draw.svg();
const fs = require('fs');
fs.writeFileSync('image.svg', svgString);

Важно: SVG.js генерирует корректный XML-код, который полностью совместим с любым SVG-редактором или веб-браузером.

Использование групп и трансформаций

Группировка элементов (<g>) позволяет управлять множественными объектами одновременно:

const group = draw.group();
group.add(draw.rect(50, 50).fill('green'));
group.add(draw.circle(30).fill('yellow').move(10, 10));
group.move(100, 100).rotate(45);
  • group.move(x, y) смещает всю группу.
  • group.rotate(angle) вращает все элементы вокруг их центра.
  • На сервере все трансформации сохраняются в атрибутах transform SVG.

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

SVG.js поддерживает текстовые элементы с форматированием:

draw.text(function(add) {
  add.tspan('Пример текста').newLine();
  add.tspan('на сервере').fill('#e74c3c');
}).font({ size: 24, family: 'Arial' }).move(50, 150);

Особенности серверного рендеринга текста:

  • Шрифты должны быть стандартными или встроенными в клиентскую среду, если требуется точное отображение.
  • Разбиение на tspan обеспечивает перенос и стиль отдельных строк.

Анимации и сервер

На сервере анимации SVG.js не выполняются, так как они рассчитаны на браузерное исполнение через requestAnimationFrame. Но можно создавать статические кадры анимации для экспорта:

for (let i = 0; i <= 10; i++) {
  const frame = draw.circle(20).fill('blue').move(10 + i*15, 50);
  fs.writeFileSync(`frame_${i}.svg`, draw.svg());
}

Каждый кадр — отдельный SVG, готовый для последующего объединения в анимацию или GIF.

Использование фильтров и эффектов

SVG.js поддерживает фильтры и стили:

const filter = draw.filterWith(function(add) {
  add.gaussianBlur(5);
});

draw.rect(100, 100).fill('orange').filterWith(filter);

На сервере фильтры сохраняются в SVG как <filter> и <feGaussianBlur>, что делает их совместимыми с рендерингом в браузере или графических редакторах.

Оптимизация SVG перед отправкой

  • Удаление неиспользуемых атрибутов снижает размер файла.
  • Методы .attr() позволяют программно очищать лишние параметры.
  • Можно использовать сторонние библиотеки (например, svgo) для минимизации перед отправкой:
const SVGO = require('svgo');
const optimizedSvg = SVGO.optimize(svgString).data;

Интеграция с веб-серверами

Сгенерированные SVG-файлы можно отдавать через Express.js:

const express = require('express');
const app = express();

app.get('/image', (req, res) => {
  res.setHeader('Content-Type', 'image/svg+xml');
  res.send(draw.svg());
});

app.listen(3000);
  • Весь SVG создается динамически при запросе.
  • Можно генерировать графики и диаграммы «на лету» без клиентской зависимости.

Итоговые рекомендации

  • Для серверного рендеринга необходимо эмулировать DOM через jsdom.
  • Экспорт SVG осуществляется методом .svg(), который возвращает корректный XML.
  • Анимации и интерактивность на сервере недоступны, но статические кадры можно создавать программно.
  • Фильтры и трансформации полностью сохраняются и корректно отображаются в браузере.
  • Оптимизация и интеграция с веб-серверами позволяет использовать SVG.js для отчетов, графиков и динамических изображений.
Оглавление