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

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

// Создание нового SVG
var s = Snap(800, 600); // ширина 800, высота 600

Можно также работать с уже существующим элементом на странице:

var s = Snap("#mySvg"); // где #mySvg — id существующего <svg>

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

Основные элементы и атрибуты

Snap.svg поддерживает создание всех стандартных SVG-элементов: <rect>, <circle>, <ellipse>, <line>, <polygon>, <path>, <text>.

var rect = s.rect(50, 50, 200, 100).attr({
    fill: "#3498db",
    stroke: "#2980b9",
    strokeWidth: 4
});

var circle = s.circle(400, 300, 80).attr({
    fill: "#e74c3c",
    stroke: "#c0392b",
    strokeWidth: 3
});

Каждый элемент Snap.svg можно сохранить в отдельную переменную, что упрощает последующее управление и экспорт.

Подготовка SVG к сохранению

Для сохранения SVG в файл важно получить его текстовое представление. Snap.svg предоставляет метод .toString(), который возвращает SVG-код:

var svgContent = s.toString();

При этом сохраняются все элементы, атрибуты и стили, заданные через Snap.svg. Однако иногда необходимо добавить декларацию XML и указать пространство имён:

var svgHeader = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n';
svgHeader += '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ';
svgHeader += '"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n';

var fullSvg = svgHeader + svgContent;

Такой подход гарантирует корректное открытие SVG в графических редакторах и браузерах.

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

Для сохранения на стороне клиента используется объект Blob и создание ссылки <a> с атрибутом download.

function saveSvg(svgText, fileName) {
    var blob = new Blob([svgText], { type: "image/svg+xml;charset=utf-8" });
    var url = URL.createObjectURL(blob);

    var link = document.createElement("a");
    link.href = url;
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Пример вызова
saveSvg(fullSvg, "drawing.svg");

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

Сохранение с учётом стилей

Если элементы SVG используют CSS-классы или внешние стили, необходимо убедиться, что они встроены в сам SVG. Snap.svg позволяет задать стили через .attr() напрямую, но внешние CSS не сохраняются. Для гарантии корректного отображения можно встроить стили в <style> внутри SVG:

var style = `
<style type="text/css">
    .myRect { fill: #3498db; stroke: #2980b9; stroke-width: 4; }
</style>
`;

var svgWithStyle = fullSvg.replace('<svg', `<svg>\n${style}`);

После этого сохранённый файл будет полностью автономным.

Работа с текстом и шрифтами

Текстовые элементы требуют особого внимания: необходимо указать шрифты явно, иначе при открытии файла на другом компьютере они могут отображаться некорректно. Пример:

var text = s.text(100, 500, "Пример текста").attr({
    "font-family": "Arial, sans-serif",
    "font-size": 24,
    fill: "#2c3e50"
});

Все атрибуты шрифта будут сохранены в SVG-коде, что обеспечивает одинаковое отображение.

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

Если элементы подвергались трансформациям (translate, rotate, scale), Snap.svg сохраняет их автоматически в атрибуте transform.

rect.transform("rotate(45,150,100) translate(50,50)");

При вызове s.toString() все трансформации включаются в итоговый SVG.

Автоматизация и интеграция с интерфейсом

Можно создать кнопку для экспорта:

var saveButton = document.getElementById("saveSvg");
saveButton.addEventListener("click", function() {
    saveSvg(s.toString(), "exported_drawing.svg");
});

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

Сохранение на сервер

Хотя Snap.svg работает на клиенте, его можно интегрировать с серверной частью через AJAX. Для этого SVG-код отправляется на сервер, где сохраняется как файл .svg:

fetch("/save-svg", {
    method: "POST",
    headers: { "Content-Type": "image/svg+xml" },
    body: s.toString()
});

На сервере может использоваться Node.js, PHP или Python для записи файла в файловую систему. Такой подход удобен для приложений, где требуется централизованное хранение или последующая конвертация в PNG/PNG.