Экспорт в SVG-строку

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

Метод svg()

Главный инструмент для экспорта — метод svg(). Он применяется к любому элементу SVG, созданному через библиотеку, и возвращает строку в формате SVG, содержащую весь внутренний контент элемента.

Пример использования:

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

const circle = draw.circle(100).fill('#f06');

const svgString = draw.svg();
console.log(svgString);

Результатом будет строка вида:

<svg width="300" height="300">
  <circle cx="50" cy="50" r="50" fill="#f06"/>
</svg>

Особенности:

  • Метод svg() без аргументов возвращает только внутреннее содержимое элемента, если вызван на контейнере, и весь элемент, если вызван на корневом объекте SVG().
  • Если передать строку в метод svg(content), она заменяет текущее содержимое элемента.

Экспорт отдельного элемента

Для отдельных графических элементов экспорт также доступен через svg():

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

const rectSVG = rect.svg();
console.log(rectSVG);

Результат:

<rect width="100" height="50" fill="blue"/>

Особенности:

  • Атрибуты стиля, трансформации и классы будут включены в строку.
  • Если элемент вложен в контейнер, svg() экспортирует только его собственные атрибуты, не затрагивая родителя.

Сериализация с корневым тегом <svg>

Чтобы получить полную SVG-строку с корневым тегом <svg>, удобно использовать метод svg() на корневом контейнере:

const fullSVG = draw.svg();
  • Строка содержит размеры, стили, дочерние элементы.
  • Можно использовать для сохранения файла на диск или передачи через API.

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

Метод toString() для элементов SVG.js возвращает аналог svg(), но с дополнительной возможностью интеграции в шаблоны:

console.log(rect.toString());

Внутри библиотека вызывает svg() и возвращает строку с корректными атрибутами и пространствами имен.

Экспорт с учетом стилей CSS

SVG.js сохраняет инлайн-стили и атрибуты, но внешние CSS не включаются автоматически.

Чтобы экспортировать с текущими стилями, лучше использовать:

  • attr() для явного присвоения свойств;
  • style() для инлайн-стилей:
circle.style({
  stroke: 'black',
  'stroke-width': 5
});

console.log(circle.svg());

Результат:

<circle cx="50" cy="50" r="50" fill="#f06" stroke="black" stroke-width="5"/>

Преобразование SVG-строки в Blob

Для сохранения на диск или отправки на сервер можно преобразовать строку в Blob:

const blob = new Blob([draw.svg()], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);

// Пример: ссылка для скачивания
const a = document.createElement('a');
a.href = url;
a.download = 'drawing.svg';
document.body.appendChild(a);
a.click();
  • Такой подход позволяет экспортировать полноценный SVG-файл без сторонних библиотек.
  • Blob сохраняет кодировку UTF-8 и все атрибуты элементов.

Экспорт с трансформациями и анимацией

SVG.js хранит трансформации (translate, rotate, scale) и анимации в атрибутах:

rect.rotate(45, 50, 25);
console.log(rect.svg());

Вывод:

<rect width="100" height="50" fill="blue" transform="rotate(45 50 25)"/>
  • Все трансформации и анимации, созданные через методы SVG.js, будут корректно экспортированы.
  • Анимации, созданные через метод animate(), не сохраняются в виде активного JavaScript-кода — экспортируются только текущие значения атрибутов.

Практические рекомендации

  1. Использовать svg() на корневом контейнере, если требуется полный SVG-документ.
  2. Проверять inline-стили, если внешний CSS не будет доступен в месте использования SVG.
  3. Применять attr() и style() для всех визуальных свойств, которые должны попасть в экспорт.
  4. Для передачи или скачивания использовать Blob и URL.createObjectURL, чтобы избежать проблем с кодировкой и MIME-типами.
  5. Если нужно обновлять SVG динамически, экспортировать только отдельные элементы для минимизации размера строки.

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

Оглавление