Я думаю, что лучшим подходом было бы использование холста с самого начала.
Затем вы можете использовать JS, поскольку вам нужно рисовать изображения на холсте (используя ваши SVG), например, так:
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";
Обратите внимание, что drawImage принимает изображение, а также координаты X и Y.См. Существующий вопрос для более подробной информации: Рисование файла SVG на холсте HTML5
После того, как вы нарисовали SVG так, как хотели бы, вы можете использовать .toDataURL() на своемхолст.Примерно так:
var canvas = document.getElementById('canvas');
var dataURL = canvas.toDataURL();
Вышеприведенное вернет строку в кодировке base64, которая, в свою очередь, может быть выведена в браузер для запроса сохранения.Следующее действительно хорошо описывает это: Как сохранить холст как изображение с canvas.toDataURL ()?
Существует также библиотека, которая поможет с преобразованием и сохранением: canvas2image