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

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

Получение SVG-контента из документа

Любой контейнер SVG, созданный с помощью SVG.js, можно преобразовать в строку с помощью метода .svg():

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

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

const svgContent = draw.svg(); // Возвращает строку SVG
console.log(svgContent);

Метод .svg() возвращает строковое представление всего содержимого SVG-контейнера, включая все вложенные элементы и их атрибуты. Это основной способ получить готовый для сохранения или отправки SVG.

Создание Blob для сохранения

Для того чтобы сохранить SVG как файл на локальной машине, необходимо создать объект Blob из строки SVG. Blob позволяет браузеру обрабатывать данные как отдельный файл:

const blob = new Blob([svgContent], { type: 'image/svg+xml;charset=utf-8' });

Здесь важно указать правильный MIME-тип (image/svg+xml), чтобы браузер корректно распознавал содержимое как SVG.

Генерация ссылки для скачивания

После создания Blob можно сгенерировать URL для скачивания с помощью URL.createObjectURL() и использовать его для ссылки:

const url = URL.createObjectURL(blob);

const link = document.createElement('a');
link.href = url;
link.download = 'drawing.svg'; // Имя файла для сохранения
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

URL.revokeObjectURL(url); // Освобождение памяти

Важный момент: всегда следует вызывать URL.revokeObjectURL() после завершения использования, чтобы избежать утечек памяти.

Сохранение только части SVG

В SVG.js возможно экспортировать не весь контейнер, а отдельные элементы. Например:

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

const rectSvg = rect.svg(); // Экспорт только одного прямоугольника

Это удобно при динамическом создании элементов, когда необходимо сохранить отдельные объекты.

Использование встроенных библиотек для скачивания

Для упрощения процесса можно использовать небольшие утилиты, такие как FileSaver.js, которые автоматически обрабатывают создание Blob и ссылку для скачивания:

import { saveAs } from 'file-saver';

const svgBlob = new Blob([draw.svg()], { type: 'image/svg+xml;charset=utf-8' });
saveAs(svgBlob, 'diagram.svg');

Это уменьшает количество ручного кода и делает процесс кроссбраузерным.

Поддержка экспорта в другие форматы

SVG.js напрямую работает с форматом SVG, но экспорт в PNG или JPEG можно реализовать через <canvas>. Для этого SVG сначала преобразуется в строку, затем в изображение, после чего рисуется на канвасе и сохраняется:

const svgData = draw.svg();
const img = new Image();
img.src = 'data:image/svg+xml;base64,' + btoa(svgData);

img.onl oad = function () {
    const canvas = document.createElement('canvas');
    canvas.width = draw.width();
    canvas.height = draw.height();
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);

    canvas.toBlob(function(blob) {
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = 'drawing.png';
        link.click();
    });
};

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

Особенности при работе с внешними ресурсами

При экспорте SVG, содержащего внешние шрифты, изображения или CSS, важно учитывать:

  • Внешние шрифты могут не отобразиться при открытии файла вне браузера без подключения к сети. Рекомендуется использовать шрифты в виде @font-face или преобразовывать текст в пути (.text().toPath()).
  • Изображения нужно инлайнить через base64, иначе они могут быть недоступны при открытии файла локально.
  • CSS-стили лучше включать внутрь <style> в SVG, так как внешние файлы стилей не сохраняются вместе с файлом.

Резюме возможностей

  • .svg() — получение SVG в виде строки.
  • Blob + URL.createObjectURL — создание и скачивание файла.
  • Экспорт отдельных элементов или всего документа.
  • Возможность конвертации в PNG/JPEG через <canvas>.
  • Управление внешними ресурсами для корректного отображения при локальном открытии.

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

Оглавление