36

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+

Ali Green
  • 599
  • 1
  • 5
  • 16
  • In a web page in order to modify it or manually i.e. look at the application source and convert the appropriate bit by pasting into a conversion program? – Robert Longson Oct 06 '15 at 16:00

4 Answers4

64
  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
Stephen Rauch
  • 47,830
  • 31
  • 106
  • 135
holas
  • 641
  • 1
  • 5
  • 2
20

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.

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • I gave you a one up, but that link just doesn't convert the a simple shape uri like this: http://jointjs.com/rappid/docs/format/svg – whyoz Oct 09 '15 at 21:06
  • on a side note, doesn't the encoded uri look malformed in IE with all those "%" in there? Is a % symbol ever supposed to be in a base64 uri? – whyoz Oct 09 '15 at 21:08
  • Whatt URI? I don't see one at that link. – Paul LeBeau Oct 10 '15 at 13:15
  • If you click on that link and scroll down to see the "open As SVG" button, it opens a new window with a solo with the encoded uri with a bunch of "%" in there..but it still opens up in IE? – whyoz Oct 12 '15 at 18:10
19

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.

Community
  • 1
  • 1
jcubic
  • 61,973
  • 54
  • 229
  • 402
  • Getting this error: ```The string to be decoded is not correctly encoded``` – Hidayt Rahman May 18 '20 at 07:30
  • @HidaytRahman you may have different MIme type of the data (you will need to update the regex) or it's not base64. – jcubic May 18 '20 at 11:13
  • am struggling with svg single path with ```d``` attribute i want to make it multiple path so i can select each path to perfrom delete or color – Hidayt Rahman May 18 '20 at 14:28
  • @HidaytRahman that SVG is base64 encoded string? if not you should ask another question, it may be not related to the thing you think it's related (check [X/Y Problem](https://en.wikipedia.org/wiki/XY_problem)). – jcubic May 18 '20 at 16:48
  • this worked for me! that's what I was looking for! 10x dude – stackoverflow Feb 01 '21 at 07:41
-1

Check out this website SVG VIEWER. You can put your .svg file or SVG Text-Based to this website. After that, you can download as .svg, .jsx, and .png extension.

Petrus Burns
  • 1