Экспорт сцены в SVG

Two.js предоставляет удобный механизм для экспорта визуальных сцен в формат SVG, что позволяет использовать созданные графические элементы вне браузера или интегрировать их в веб-страницы и документы. SVG (Scalable Vector Graphics) сохраняет информацию о векторных объектах, включая их координаты, цвета, трансформации и слои.

Для начала работы с экспортом необходимо убедиться, что экземпляр Two.js создан с параметром type: Two.Types.svg, либо использовать метод makeSVG для получения SVG-контекста сцены.

const elem = document.getElementById('draw');
const two = new Two({ width: 800, height: 600, type: Two.Types.svg }).appendTo(elem);

const circle = two.makeCircle(200, 200, 50);
circle.fill = '#FF8000';
circle.stroke = '#000000';
circle.linewidth = 5;

two.update();

В этом примере создается сцена с кругом, который можно сразу экспортировать в SVG.

Метод renderer.domElement

После рендеринга сцены объект two.renderer.domElement содержит SVG-документ, который можно получить как строку. Это позволяет сохранить его в файл или вставить в HTML:

const svgString = two.renderer.domElement.outerHTML;
console.log(svgString);

SVG-строка будет содержать все элементы сцены с их атрибутами: fill, stroke, stroke-width, transform и др.

Использование метода makeSVG()

Если сцена создавалась в режиме canvas или webgl, метод makeSVG() позволяет сгенерировать SVG-реплику текущей сцены:

const svg = two.makeSVG();
document.body.appendChild(svg);

В результате создается полноценный <svg> элемент с текущими объектами сцены, готовый для вставки в DOM.

Экспорт с учетом групп и трансформаций

Two.js корректно сохраняет группы объектов и их локальные трансформации. Например:

const group = two.makeGroup();
const rect = two.makeRectangle(0, 0, 100, 50);
const ellipse = two.makeEllipse(50, 50, 60, 30);

group.add(rect, ellipse);
group.translation.set(200, 200);

two.update();
const svgGroup = two.makeSVG();
document.body.appendChild(svgGroup);

SVG будет содержать <g> элемент с соответствующими трансформациями, позволяя сохранять относительное расположение объектов.

Настройка атрибутов SVG при экспорте

Каждому объекту сцены можно задать специфические атрибуты, которые будут отражены в SVG. Основные из них:

  • fill — цвет заливки
  • stroke — цвет контура
  • linewidth — толщина линии
  • opacity — прозрачность
  • visible — видимость элемента

Дополнительно можно использовать пользовательские атрибуты через renderer.domElement.setAttribute().

circle.opacity = 0.5;
circle.visible = true;
two.update();

const svgElement = two.renderer.domElement;
svgElement.setAttribute('data-custom', 'example');

Сохранение SVG в файл

Для сохранения в файл в браузере используется комбинация Blob и ссылки <a>:

const svgBlob = new Blob([two.renderer.domElement.outerHTML], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(svgBlob);

const downloadLink = document.createElement('a');
downloadLink.href = url;
downloadLink.download = 'scene.svg';
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
URL.revokeObjectURL(url);

Этот подход гарантирует корректное сохранение SVG с сохранением всех свойств сцены.

Динамическое обновление и экспорт

При изменении объектов сцены экспорт можно выполнять после каждого обновления, что позволяет формировать анимированные последовательности в виде отдельных SVG-файлов:

circle.rotation += 0.05;
two.update();

const svgFrame = two.renderer.domElement.outerHTML;
// svgFrame можно сохранять для последовательной анимации

Особенности и ограничения

  • Эффекты WebGL, такие как шейдеры и фильтры, не экспортируются в SVG.
  • Анимации внутри Two.js сохраняются как статичные кадры. Для интерактивной анимации необходима отдельная обработка через SMIL или CSS-анимации.
  • Текстовые элементы экспортируются корректно, если использовать встроенный Two.Text. Шрифты и стили задаются через атрибуты font-family, font-size и text-anchor.

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

  • Для статичных векторных сцен использовать тип Two.Types.svg.
  • Для сцен с динамическими трансформациями применять метод makeSVG() после two.update().
  • Всегда проверять корректность атрибутов и видимость элементов перед сохранением.
  • Группировка объектов позволяет поддерживать сложные композиции при экспорте.

Такой подход обеспечивает точный экспорт любой сцены Two.js в формат SVG с сохранением всех ключевых параметров объектов и их взаимного расположения.

Оглавление