Converting a data URI back to SVG

28,753

Solution 1

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.

Solution 2

  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

Solution 3

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.

Share:
28,753
Ali Green
Author by

Ali Green

Manchester based front end developer at @Great_Fridays

Updated on July 09, 2022

Comments

  • Ali Green
    Ali Green almost 2 years

    Might be a silly question but is it possible to convert a data URI back to SVG? I've Googled & searched SO and found nothing on the subject, loads of stuff on the other way round of course.

    Thanks!

    Edit: sorry should've been more specific - a data:image like this:

    data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MCA4MCI+PHBhdGggZmlsbD0iIzFBMzc2MSIgZD0iTTE3Ljc4IDI1LjY1Yy44OS0uODkgMi4zNS0uODkgMy4yNSAwTDQwIDQ0LjU5bDE4Ljk3LTE4Ljk1Yy44OS0uODkgMi4zNS0uODkgMy4yNCAwbDIuNDMgMi40M2MuODkuODkuODkgMi4zNSAwIDMuMjVMNDEuNjIgNTQuMzVjLS45Ljg5LTIuMzUuODktMy4yNSAwTDE1LjM1IDMxLjMzYy0uODktLjg5LS44OS0yLjM1IDAtMy4yNWwyLjQzLTIuNDN6Ii8+PC9zdmc+