html5保存png,html - Save <svg> HTML5 to PNG or image - Stack Overflow

Server-side script method

Here is a simple method to save svg elements to png(though it uses server-side scripting, which may be different from what you'd expect):

Checkout this page.

As is documented by the author, the client extract the svg element (using XMLSerializer.serializeToString)and send it to server; the server convert it to png and send it back to the client. The server can use any program that is convenient(rsvg-convert in this case).

Canvg library

You can use this library to do this on client side (check it out!):

canvg is a SVG parser and renderer. It takes a URL to a SVG file or the text of an SVG file, parses it in JavaScript, and renders the result on a Canvas element

Use it like this:

//load a svg snippet in the canvas with id = 'drawingArea'

canvg(document.getElementById('drawingArea'), '... ')

Then you can use the toDataURL method:

document.getElementById('drawingArea').toDataURL('image/png');