Converting an SVG Path to a Base64 data uri string


#1

How would I convert an SVG path to a Base64 data uri string?

Using this svg path as an example. How would I convert it?

 <svg viewBox="0 0 1226 1481">
        <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red"/></svg>

#2

You could do it like this...

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }

svg{
    display:none;
 }

img {
    display: block;
    width: 4em;
    padding: 0.25em;
    margin:auto;
    border: 0.062em solid #000;
    background-color: #fff;
 }
</style>

</head>
<body> 
 <svg viewBox="0 0 1226 1481">
  <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red"/>
 </svg>

<script>

(function(w,d) {
   'use strict';

   var svg = new XMLSerializer().serializeToString(d.getElementsByTagName( 'svg' )[ 0 ]);
   var base64 = w.btoa( svg );
   var i= d.createElement( 'img' );
       i.setAttribute( 'src', 'data:image/svg+xml;base64,' + base64 );
       d.body.appendChild( i );
}(window, document));
</script>

</body>
</html>
  1. Save this code as an HTML file and open it in your browser.
  2. Then right-click on the image.
  3. If "Firefox" left-cllck - "Copy Image Location" .
  4. If "Chrome" left-cllck - "Copy image address" .
  5. Open your Text Editor , right-click , then left-cllck - "Paste" .

These actions will give you the bass64 code...

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9InJlZCIvPgogPC9zdmc+

coothead


#3

Hi there asasass,

you may find this a little easier to work with...

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>SVG code to base64 conversion</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }

svg{
    display:none;
 }

h1 {
   font-size: 1.5em;
   text-align: center;
 }

#base{
    max-width: 50em;
    padding: 1em;
    margin:auto;
    border: 0.062em solid #000;
    background-color: #fff;
    word-break: break-all;
 }
</style>

</head>
<body> 

  <h1>SVG code to base64 conversion</h1>

  <div id="base"></div>

 <svg viewBox="0 0 1226 1481">
  <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red"/>
 </svg>

<script>
(function(w,d) {
   'use strict';
   var svg = new XMLSerializer().serializeToString(d.getElementsByTagName( 'svg' )[ 0 ] );
   var base64 = w.btoa( svg );
   d.getElementById( 'base' ).appendChild( d.createTextNode( 'data:image/svg+xml;base64,' + base64 ) );
}(window, document));
</script>

</body>
</html>

coothead


#4

Yes, thank you.

Both ways of doing this is appreciated.


#5

 
 
      No problem, you're very welcome. :winky:

      coothead


#6

Doing it this way allows me to skip this.


#7

Is there such a thing as base64 to SVG conversion?

Can that be made?

You put in this:

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9InJlZCIvPgogPC9zdmc+

and you get this:

 <svg viewBox="0 0 1226 1481">
  <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red"/>
 </svg>

#8

Hi there asasass,

You put this...

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9InJlZCIvPgogPC9zdmc+

...in the address bar of your browser - ( I tested in Firefox, Chrome and Opera ).

Click "Enter" will display the .svg image.

Click "View Source" and you will get this...

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1226 1481">
  <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red"/>
 </svg>

coothead


#9

If you can do it from your browser, then theoretically one could be made, right?

I did searches and I couldn't find anything.


#10

That would be like, reverse engineering this, right?
To the right specifications.

Or is it more to it than that?
https://jsfiddle.net/yyvbqpxL/1/

<title>SVG code to base64 conversion</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }

svg{
    display:none;
 }

h1 {
   font-size: 1.5em;
   text-align: center;
 }

#base{
    max-width: 50em;
    padding: 1em;
    margin:auto;
    border: 0.062em solid #000;
    background-color: #fff;
    word-break: break-all;
 }
</style>

</head>
<body> 

  <h1>SVG code to base64 conversion</h1>

  <div id="base"></div>

 <svg viewBox="0 0 1226 1481">
  <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red"/>
 </svg>

<script>
(function(w,d) {
   'use strict';
   var svg = new XMLSerializer().serializeToString(d.getElementsByTagName( 'svg' )[ 0 ] );
   var base64 = w.btoa( svg );
   d.getElementById( 'base' ).appendChild( d.createTextNode( 'data:image/svg+xml;base64,' + base64 ) );
}(window, document));
</script>

#11

Why would you need a separate tool to do it when it can be done in the browser?


#12

I just wanted to know how difficult or not it would be to make something like that.


#13

Hi there asasass,

I would have given you the decode code in the first place but
I thought that you would prefer the address bar method. :winky:

Wrong again. :unhappy:

Still, the javascript method is very simple...

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }
#html {
    display: block;
    width: 100%;
    max-width: 44em;
    height: 8em;
    padding: 1em;
    margin: auto;
    box-sizing: border-box;
    box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.3 );
  }  
</style>

</head>
<body> 

<textarea id="html"></textarea>

<script>
(function(w,d) {
   'use strict';
   var base64 = 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9InJlZCIvPgogPC9zdmc+';
   var decode = w.atob( base64 );

   d.getElementById( 'html' ).value = decode;

}(window, document));
</script>

</body>
</html>

coothead


#14

A post was split to a new topic: Converting images to a Base64 data URL


#15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.