ExportSVG и экспорт в SVG

Paper.js предоставляет мощный механизм для создания векторной графики на HTML5 Canvas и позволяет легко экспортировать созданные объекты в формат SVG. Экспорт SVG полезен для последующего использования графики в вебе, печати или импорте в графические редакторы.

Метод project.exportSVG()

Основным инструментом для экспорта является метод exportSVG, который принадлежит объекту Project. Его вызов возвращает объект SVG, который можно сериализовать в строку.

// Экспорт всего проекта в SVG
var svg = project.exportSVG({ asString: true });
console.log(svg); // Строка с содержимым SVG

Параметры метода exportSVG:

  • asString (boolean) — если true, возвращает SVG в виде строки. По умолчанию возвращает объект SVGElement.
  • bounds (Rectangle) — область, которую нужно экспортировать. По умолчанию экспортируется весь холст.
  • precision (number) — количество знаков после запятой для координат. Уменьшает размер SVG при необходимости.
  • matchShapes (boolean) — если true, Paper.js пытается сохранить базовые примитивы (Path.Circle, Path.Rectangle) в виде <circle> и <rect>, а не сложных <path>.

Пример с настройкой точности и ограниченной областью:

var rect = new Rectangle(new Point(0, 0), new Size(200, 200));
var svg = project.exportSVG({
    bounds: rect,
    precision: 2,
    asString: true
});
console.log(svg);

Экспорт отдельных элементов

Метод exportSVG доступен не только на уровне проекта, но и у каждого элемента (Item). Это позволяет экспортировать отдельные пути, группы или текст.

var circle = new Path.Circle(new Point(100, 100), 50);
circle.fillColor = 'red';

// Экспорт конкретного круга
var circleSVG = circle.exportSVG({ asString: true });
console.log(circleSVG);

Для группы элементов экспорт выглядит аналогично:

var group = new Group();
group.addChild(new Path.Circle(new Point(50, 50), 30));
group.addChild(new Path.Rectangle(new Point(100, 100), new Size(50, 50)));

var groupSVG = group.exportSVG({ asString: true });

Управление стилями

Paper.js при экспорте SVG сохраняет все атрибуты элементов, такие как fillColor, strokeColor, strokeWidth, opacity и трансформации. Однако иногда требуется дополнительная обработка для совместимости с другими SVG-редакторами.

var path = new Path.Rectangle(new Point(10, 10), new Size(80, 80));
path.fillColor = 'blue';
path.strokeColor = 'black';
path.strokeWidth = 2;

var svgElement = path.exportSVG();
svgElement.setAttribute('style', 'stroke-linecap: round; stroke-linejoin: round;');

Сериализация в строку

Экспорт по умолчанию возвращает объект SVGElement. Для сохранения в файл или отправки на сервер используется сериализация:

var svgElement = project.exportSVG();
var svgString = new XMLSerializer().serializeToString(svgElement);
console.log(svgString);

При использовании asString: true Paper.js автоматически выполняет сериализацию.

Поддержка трансформаций

Все трансформации Paper.js — перемещения, вращения, масштабирование — автоматически конвертируются в атрибут transform SVG. Это гарантирует точное отображение графики вне Canvas.

var rect = new Path.Rectangle(new Point(0, 0), new Size(100, 50));
rect.fillColor = 'green';
rect.rotate(45);

var svg = rect.exportSVG({ asString: true });

Результирующий SVG будет содержать <g transform="rotate(45 ...)">, сохраняя поворот.

Экспорт текста

Элемент PointText также поддерживается при экспорте в SVG. Все параметры текста — шрифт, размер, выравнивание — сохраняются.

var text = new PointText(new Point(100, 100));
text.content = "Пример текста";
text.fontSize = 24;
text.fillColor = 'black';

var textSVG = text.exportSVG({ asString: true });

SVG будет содержать <text> с правильными координатами и стилем.

Практические советы по оптимизации SVG

  • Использовать precision для уменьшения размера файла.
  • Включать matchShapes: true для сохранения примитивов вместо сложных путей.
  • Экспортировать отдельные элементы, если не нужен весь проект.
  • Проверять совместимость атрибутов с целевыми SVG-редакторами.
  • Сохранять трансформации в атрибуте transform для точного позиционирования.

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

Оглавление