Search code examples
javascriptjqueryhtmlsvghtml2canvas

How to download dom as svg in html2canvas?


how can I save a dom as svg file using html2canvas ? For downlading as png , I've done something like below :

html2canvas(document.querySelector('#demo')).then(function(canvas) {
                saveAs(canvas.toDataURL(), 'image.png');
});

How can I achieve similar result to save it as svg file ?


Solution

  • You don't.

    The reason you can export to png/jpg/etc is that the canvas is a pixel graphic presentation layer, so for convenience it knows how to generate the browser-supported image types that use embedded bitmaps.

    If you want vector graphics instead, then you'll need to actually draw vectors, and that means not relying on the canvas APIs. You either roll your own vector drawing instruction set (directly generating SVG yourself, or rasterizing objects to the canvas purely as presentation layer), which I would recommend against, or you use one of several vector graphics packages already out there like Paper.js, Three.js, Rafael, and so forth.