Question

I have converted svg to image using Raphael.js , canvg and jquery.

But want to make the image at the center of rectangular view port in
svg as well as png. and resize it to particular size like 800*600 etc using chrome.

I am getting the result image that is small and not centered to rectangle.
How can I acheive this. I have jsfiddle setup. Here The fiddle I have compiled.
Also I am getting “ERROR: Element ‘html’ not yet implemented. ” in the fiddle error although I don’t have leading spaces( or I don’t have idea).

I don’t have “ERROR: Element ‘html’ not yet implemented.” error in
local pc.

Thank you very much for your help.

Answer 1

You were trying to create a canvas from a HTML string that contained two elements:

• The SVG element you wanted to convert
• The Canvas element you wanted to use to in order convert the SVG into a PNG.

Canvg doesn’t like having multiple elements to parse, and so complained about “HTML”.

Have a look at this fiddle forked from yours: http://jsfiddle.net/LVZEX/2/

All it does is add an extra replace that removes the canvas tag from the end of the HTML string extracted from the map div

      var svg = $('#map').html().replace(/>\s+/g, ">").replace(/\s+</g, "<").replace(/<canvas.+/g,"");