Получение outer и inner SVG

Snap.svg предоставляет гибкий API для работы с векторной графикой в формате SVG. Одной из часто используемых возможностей является получение содержимого SVG в виде строки. Различают два подхода: получение inner SVG и outer SVG, которые позволяют экспортировать либо внутреннее содержимое элемента, либо весь элемент целиком с тегом <svg>.

Получение inner SVG

Inner SVG — это строковое представление содержимого элемента <svg> без самого контейнера <svg>. В Snap.svg это достигается с помощью метода innerSVG объекта Paper или любого элемента типа Element.

Пример:

// Создание SVG контейнера
var s = Snap(400, 400);

// Добавление элементов
var circle = s.circle(100, 100, 50).attr({
    fill: "red",
    stroke: "#000",
    strokeWidth: 2
});

var rect = s.rect(150, 150, 100, 50).attr({
    fill: "blue",
    stroke: "#000",
    strokeWidth: 2
});

// Получение inner SVG
var inner = s.innerSVG();
console.log(inner);

В результате inner будет содержать строку, примерно такую:

<circle cx="100" cy="100" r="50" fill="red" stroke="#000" stroke-width="2"/>
<rect x="150" y="150" width="100" height="50" fill="blue" stroke="#000" stroke-width="2"/>

Ключевые моменты:

  • innerSVG() возвращает только вложенные элементы, без тега <svg>.
  • Можно использовать для вставки содержимого в другой SVG-контейнер или для сериализации частей графики.

Получение outer SVG

Outer SVG — это полное представление SVG, включая сам тег <svg> и все вложенные элементы. Snap.svg предоставляет метод outerSVG(), который часто используется для сохранения готовой графики в файл или передачи в другой контекст.

Пример:

// Используем тот же контейнер s
var outer = s.outerSVG();
console.log(outer);

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

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="100" r="50" fill="red" stroke="#000" stroke-width="2"/>
    <rect x="150" y="150" width="100" height="50" fill="blue" stroke="#000" stroke-width="2"/>
</svg>

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

  • outerSVG() включает все атрибуты контейнера, такие как width, height, xmlns.
  • Позволяет полностью экспортировать SVG для сохранения в файл или вставки в DOM как самостоятельный объект.

Применение inner и outer SVG для элементов Snap

Методы innerSVG и outerSVG доступны не только для объекта Paper (SVG контейнера), но и для отдельных элементов Snap. Например:

var g = s.group(circle, rect);
var gInner = g.innerSVG(); // только содержимое группы
var gOuter = g.outerSVG(); // группа вместе с тегом <g>

Пример вывода:

<!-- g.innerSVG() -->
<circle cx="100" cy="100" r="50" fill="red" stroke="#000" stroke-width="2"/>
<rect x="150" y="150" width="100" height="50" fill="blue" stroke="#000" stroke-width="2"/>

<!-- g.outerSVG() -->
<g>
    <circle cx="100" cy="100" r="50" fill="red" stroke="#000" stroke-width="2"/>
    <rect x="150" y="150" width="100" height="50" fill="blue" stroke="#000" stroke-width="2"/>
</g>

Преимущества:

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

Прямой доступ к DOM и сериализация

Snap.svg хранит элементы как объекты JavaScript, но иногда требуется получить строку SVG через DOM API:

var svgNode = s.node; // объект <svg> в DOM
var outerDom = new XMLSerializer().serializeToString(svgNode);
console.log(outerDom);

Этот подход работает независимо от Snap.svg и позволяет полностью контролировать сериализацию, включая комментарии и пространственные атрибуты.

Работа с атрибутами при экспорте

При экспорте через outerSVG или innerSVG важно помнить:

  • Snap.svg автоматически сохраняет все атрибуты, заданные через .attr().
  • Стиль можно включить как атрибуты fill, stroke, stroke-width, но CSS внутри <style> тегов не сериализуется автоматически.
  • Для сложных стилей рекомендуется задавать их через атрибуты или вручную вставлять <style> перед сохранением.

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

Использование innerSVG() подходит для:

  • Вставки элементов в другой контейнер.
  • Создания шаблонов графики.

Использование outerSVG() подходит для:

  • Сохранения готовой графики в файл.
  • Динамического создания SVG для загрузки пользователем или отправки на сервер.

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

Оглавление