Converting SVG with parameters to another file type?

Question

on my website, I have an SVG image which is generated using parameters from a form that a user selects.

All works fine, but I'm struggling to think of a way to do the next part.

Once the user is finished, they click a button... I want this button to convert the SVG to another format (eps, jpeg, or png, preferably) ready to be sent to me.

I'm open as to how this can be sent to me... I'm thinking I'll need to generate the image on the server, and write a script to email me a link to it or something...

But the more important part of my question is how I can generate the image in the first place? I've had a quick look at Batik and ImageMagick, but can't find anything about using parameters in the SVG.

Thanks!

Answer 1

1. You can serialize your client-side SVG to an XML string and send that to the server via AJAX. This is the simplest and most lossless way:

   var svg = document.getElementById('my_svg');
   var str = (new XMLSerializer).serializeToString(svg);
   

2. Depending on the browser and version and features you've used, you may be able to render your SVG to an in-browser <canvas> and then convert the canvas pixels to a PNG data URL and send that to the server via AJAX. See this question for details.

   • See also Drawing DOM objects into a canvas on MDN.