Saving a manipulated SVG image in a web browser

Question

I have created an online tool that uses javascript to manipulate elements of a premade SVG image. The problem I'm having is that to access the DOM, I have put the image in an object tag. But doing so prevents you from right clicking the image in a browser and clicking save. Okay, that's fine, so I'll just put it in an img tag. Img tags let you right click and save. Oh- but in an img tag, you can't access the DOM. So the image can't be manipulated by the javascript function. Canvas seems to also disallow right clicking and saving. What do I try next?

Answer 1

If you want to use Canvas, you can use something like canvas2img: http://www.nihilogic.dk/labs/canvas2image/

Put a button on your page, from which you can export the canvas to any number of formats. I'm sure there are other frameworks for this as well, I think Kinetic.js has something built in, or you could easily roll your own.