SVG to Canvas to PNG

Getting SVG in and out of canvas

Click here to see if your browser supports getting SVG to Canvas to PNG (canvas.toDataURL). And here's a barebones example and this test here to confirm your browser supports canvas and toDataURL.

Summary

All recent browsers except IE and Safari support getting image data from a canvas with an SVG.

Pretty much any recent version of Chrome, Firefox or Safari support native SVG rendering to canvas; and IE9+

Both IE and Safari make the canvas write only: IE11 and down, and Safari 7.0 and down. Safari 7.1 fixes this.

What is this?

It's not news that you can render a variety of images on <canvas> using drawImage(); including PNG, JPEG and even SVG.

It wasn't long ago that rendering an SVG immediately made the canvas write-only -- even if the SVG was relative or a data uri.

The goal of this site is to determine exactly which browsers allow what and when so workarounds like fabric.js and canvg can be avoided.

Native Rendering of SVG to Canvas

          var img = new Image();
          img.onload = function() {
            context.drawImage(img, 0, 0);
          };
          img.src = 'my/relative.svg';
        

Cross-Origin SVG Rendering

          var img = new Image();
          img.onload = function() {
            context.drawImage(img, 0, 0);
          };
          img.crossOrigin = 'anonymous';
          img.src = 'https://not.mydomain.example/crossorigin.svg';
        

SVG Data URIs

          var img = new Image();
          img.onload = function() {
            context.drawImage(img, 0, 0);
          };
          img.src = 'data:image/svg+xml;base64, ...';
        

Canvas toDataURL with SVG

          var img = new Image();
          img.onload = function() {
            context.drawImage(img, 0, 0);
            console.log('datauri', canvas.toDataURL());
          };
          img.src = 'my/relative.svg';