Skip to content

Latest commit

 

History

History
52 lines (39 loc) · 1.27 KB

README.md

File metadata and controls

52 lines (39 loc) · 1.27 KB
Raw

SVG to base64 converter written in pure javascript

It's easy to use - just grab SVG you want to convert and... do it.

Quick start

We need to get our target SVG:

var svg = document.querySelector('svg');

than we must create canvas with width and height exactly like our svg which we want convert:

var canvas = document.createElement('canvas');
canvas.width = svg.getBoundingClientRect().width;
canvas.height = svg.getBoundingClientRect().height;
body.appendChild(canvas);

...and here comes the magic:

XMLSerializer.serializeToString() - Returns the serialized subtree of a string

var svg_xml = (new XMLSerializer()).serializeToString(svg);

Get handle of created earlier canvas

canvasTmp = document.getElementById('canvas');
ctx = canvasTmp.getContext('2d');

Create Image object and draw on canvas. As we're generating the image dynamically, we must set the onload property before the src.

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

That's all - base64 image is in img.src

Browser support

  • Chrome (latest 2)
  • Firefox (latest 2)
  • Internet Explorer 10+
  • Opera (latest 2)
  • Safari (latest 2)