Converting a data URI back to SVG

Using javascript, you can open developer tool and run this code in the console:

var dataURI = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MCA4MCI+PHBhdGggZmlsbD0iIzFBMzc2MSIgZD0iTTE3Ljc4IDI1LjY1Yy44OS0uODkgMi4zNS0uODkgMy4yNSAwTDQwIDQ0LjU5bDE4Ljk3LTE4Ljk1Yy44OS0uODkgMi4zNS0uODkgMy4yNCAwbDIuNDMgMi40M2MuODkuODkuODkgMi4zNSAwIDMuMjVMNDEuNjIgNTQuMzVjLS45Ljg5LTIuMzUuODktMy4yNSAwTDE1LjM1IDMxLjMzYy0uODktLjg5LS44OS0yLjM1IDAtMy4yNWwyLjQzLTIuNDN6Ii8+PC9zdmc+';

var svg = atob(dataURI.replace(/data:image\/svg\+xml;base64,/, ''));
console.log(svg);

The atob() method decodes a base-64 encoded string.


  1. View the data URI in a web browser
  2. Use inspect element
  3. Open the data URI in new browser window/tab
  4. Save the image as an .svg file

I am going to assume you mean a Base64 encoded data URI.

The answer is yes. The URI will look something like:

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0c...

The Base64 part is the part that starts with PH. Copy that part into an online converter such as this one.

Tags:

Svg

Data Uri