Convert Inline SVG To Base64 String

Answer :

Use XMLSerializer to convert the DOM to a string

var s = new XMLSerializer().serializeToString(document.getElementById("svg"))

and then btoa can convert that to base64

var encodedData = window.btoa(s);

Just prepend the data URL intro i.e. data:image/svg+xml;base64, and there you have it.

You can do it relatively straightforwardly as follows. The short version is

1. Make an image not attached to the dom


2. Set its size to match the source svg


3. base64 encode the source svg, append the relevant data, set img src



4. Get the canvas context; .drawImage the image

   
   
   

   
   

   
   
   
   
   
   

   <script type="text/javascript">
   
   
       window.onload = function() {
           paintSvgToCanvas(document.getElementById('source'), document.getElementById('tgt'));
       }
   
   
   
       function paintSvgToCanvas(uSvg, uCanvas) {
   
           var pbx = document.createElement('img');
   
           pbx.style.width  = uSvg.style.width;
           pbx.style.height = uSvg.style.height;
   
           pbx.src = 'data:image/svg+xml;base64,' + window.btoa(uSvg.outerHTML);
           uCanvas.getContext('2d').drawImage(pbx, 0, 0);
   
       }
   
   
   </script>
   

   
   
   
   
   
   
   
   
   

   <svg xmlns="http://www.w3.org/2000/svg" width="467" height="462" id="source">
     <rect x="80" y="60" width="250" height="250" rx="20" style="fill:#ff0000; stroke:#000000;stroke-width:2px;" />
     <rect x="140" y="120" width="250" height="250" rx="40" style="fill:#0000ff; stroke:#000000; stroke-width:2px; fill-opacity:0.7;" />
   </svg>
   
   <canvas height="462px" width="467px" id="tgt"></canvas>
   

   
   
   
   
   
   

JSFiddle: https://jsfiddle.net/oz3tjnk7/

I just try to collect and explain all great ideas on this issue. This works on both Chrome 76 and Firefox 68

var svgElement = document.getElementById('svgId');

// Create your own image
var img = document.createElement('img');

// Serialize the svg to string
var svgString = new XMLSerializer().serializeToString(svgElement);

// Remove any characters outside the Latin1 range
var decoded = unescape(encodeURIComponent(svgString));

// Now we can use btoa to convert the svg to base64
var base64 = btoa(decoded);

var imgSource = `data:image/svg+xml;base64,${base64}`;

img.setAttribute('src', imgSource);