Конвертируем svg to png

[prolis]

Я пользовался этим: https://github.com/exupero/saveSvgAsPng — без IE.

[mavrin]

В указанной вами библиотеке, как раз используется первый, описанный мною, вариант.

[kashey]

Еще стоит учесть что

1. Многие браузеры требуют чтобы Image был добавлен в документ, иначе в него «не входит» SVG
2. Некоторые браузеры любят когда в него входит чуть более «уникальный» SVG, иначе кеша творят что-то странно и на выходе получается тыква
3. Существует пара нюансов с «ретиной»
4. Потом canvas можно опять превратить в css/html через datauri, -webkit-canvas или -moz-element — работать будет малек быстрее.

Но вообще чтука хорошая. Маст хэв.

[Nixx]

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

[mavrin]

Да, но у серверного решения есть большой недостаток, не всегда возможно поднять тот или иной стек технологий. Кстати как вы делали рендер на севере? Что использовали?

[Nixx]

inkscape — дал наиболее приближенный результат. Задача была конвертировать svg в png в точности и с использованием нестандартных шрифтов.
Еще использовали imagemagick, но с ним как то не сраслось…

[mavrin]

Очень неожиданно, я бы в первую очередь посмотрел бы в сторону phantomjs.org/ или slimerjs.org/. Но с ними я не уверен в стабильности. Но здесь конечно всё зависит от задачи.

[Xao]

Я как-то решил проблему крайне простым образом. Вы пробовали сохранить *.svg картинку в, собственно говоря, IE? Вот я однажды попробовал — *.png получается.

[mavrin]

Забавно, IE предлагает формат сохранения, а вот хром нет. Но ведь хочется пользователю дать возможность сделать это наиболее простым способом, просто нажатием на ссылку «Сохранить».

[Keyten]

developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas вот ещё есть :)

[mavrin]

Таже проблема, что и в первом варианте, собственно это и есть модификация первого варианта просто по другому задается URL для image. jsfiddle.net/a9ude9p0/12

[pelment]

Спасибо большое за статью, обыскалась клиентское решение задачи!
У меня возникла проблема в связи с использованием Raphael и вашего метода, оказалось, что из-за того, что canvg лезет в parentNode, просто svg-шку, которую строит Raphael, использовать не получилось. Добавила перед вашим решением вот такой кусок:

document.getElementById('svg-div').innerHTML = paper.toSVG();
var svg = document.querySelector('svg');

В html это строчка

<div id="svg-div" style="display:none"></div>

Функция toSVG() из https://github.com/AliasIO/Raphael.Export И получился экспорт png из raphael.
Еще раз большое спасибо!