Каков наилучший способ сериализации SVG из клиентского DOM?

Question

Я работаю над интерактивными интерфейсами SVG / AJAX, где элементы создаются и перемещаются пользователями на лету. Я хотел бы поддержать возможность для пользователей экспортировать их текущий вид в изображение PNG и / или документ SVG. Мне бы очень хотелось, чтобы документ SVG был как можно более простым (без большого количества вложенных преобразований). Есть ли фреймворк, который уже поддерживает это?

В настоящее время я прошу своих пользователей использовать технику Ctrl + Alt + PrntScrn, и я не хочу просить их устанавливать какое-либо программное обеспечение / плагины.

Серверный код реализован на PHP прямо сейчас, если это поможет. Я уже реализовал возможность генерировать изображение PNG из «оригинального» документа (до того, как клиент внесет какие-либо изменения) с использованием ImageMagick.

Answer 1

Полагаю, вам нужно, чтобы это работало только в браузерах, поддерживающих SVG.

Firefox, Safari и Opera предоставляют нестандартный XMLSerializer API, поэтому вы можете сделать что-то вроде этого:

var svg = document.getElementById('svg_root'); // or whatever you call it
var serializer = new XMLSerializer();
var str = serializer.serializeToString(svg);

Оттуда вы можете отправить его на сервер и получить PNG взамен.

Вот Страница разработчика Mozilla по сериализации XML из DOM .

Answer 2

В Opera реализована DOM W3C → XML-сериализатор . В режиме XML innerHTML возвращает правильно сформированный XML в Gecko.

HTML5 <canvas> может экспортировать свое содержимое в виде файла PNG, используя toDataURL(), и можно нарисовать любой элемент <img> на холсте, используя drawImage(), поэтому должна быть возможность создать <img src="data:application/svg+xml,…">, нарисовать его на холсте и экспортируйте как data: URL.