Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Convert SVG's to PNGs. This works OK if the SVG's styles are inline. The SVG element must contain an xmlns attribute. Webkit also requires you specify a font size on `text` elements.
var svg = document.getElementById('graph'),
xml = new XMLSerializer().serializeToString(svg),
data = "data:image/svg+xml;base64," + btoa(xml),
img = new Image()
img.setAttribute('src', data)
document.body.appendChild(img)
@gustavohenke

This comment has been minimized.

Copy link

commented Feb 18, 2014

Where's png in this...?

@gustavohenke

This comment has been minimized.

Copy link

commented Feb 18, 2014

@offc

This comment has been minimized.

Copy link

commented May 8, 2014

How do we do the exact opposite of this process?

@matti

This comment has been minimized.

@JamesDonnelly

This comment has been minimized.

Copy link

commented Jan 4, 2017

Just a heads-up: this doesn't work if the SVG features symbols outside of the Latin1 range as the btoa function is unable to convert these:

Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

This Stack Overflow answer provides a workaround though: http://stackoverflow.com/a/26603875/1317805

@Eng3l

This comment has been minimized.

Copy link

commented Feb 9, 2017

I'm trying to doit with a Highmaps svg but it throws InvalidCharacterError: String contains an invalid character

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.