From SVG to Canvas and Back (demo)

SVG

Canvas

1. Canvas to SVG
   • Canvas.toDataURL("image/png");
     • Works with all major browsers, including IE9.
2. SVG to Canvas
   • SVG.toDataURL('image/png');
     • Emulated with canvg.
     • Works with all major browsers, including IE9.
     • Canvas becomes write-only only if the imported SVG has images from different origin, or embedded svg images.
   • Server-side conversion with Ajax
     • Works with all major browsers, including IE9.
   • Draw SVG to Canvas with canvas.drawImage()
     • Canvas becomes write-only! (origin-clean dirty)
     • Works with Webkit (Chrome and Safari).
3. Exporting as a file
   1. Canvas→PNG
      1. Right-click→Save as… (Firefox supports it)
      2. Canvas.toDataURL (new window)
   2. SVG→PNG
      1. Server-side
      2. SVG.toDataURL('image/png')
   3. SVG→SVG file
      1. Right-click→Save as… (IE9 supports it)
      2. SVG.toDataURL('image/svg+xml') (new window)