mavrin Apr 5 2015 at 22:02

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

2 min

47K

Website development*JavaScript*Canvas*

Tutorial

+25

Comments 12

prolis Apr 5 2015 at 22:56

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

mavrin Apr 5 2015 at 23:33

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

kashey Apr 6 2015 at 08:53

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

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

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

Nixx Apr 6 2015 at 17:22

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

mavrin Apr 6 2015 at 17:36

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

Nixx Apr 6 2015 at 18:59

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

mavrin Apr 6 2015 at 19:06

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

Xao Apr 6 2015 at 21:02

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

mavrin Apr 6 2015 at 21:24

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

Keyten Apr 12 2015 at 12:09

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

mavrin Apr 13 2015 at 09:07

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

pelment Oct 21 2015 at 21:45

Спасибо большое за статью, обыскалась клиентское решение задачи!
У меня возникла проблема в связи с использованием 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.
Еще раз большое спасибо!

Show the best of all time