JSFiddle - React, Tailwind, and code Playground

Convert SVG to base64 on the fly

by Andrew Pougher

JavaScript

var svg= '<svg width="97" height="100" xmlns="http://www.w3.org/2000/svg"><path d="m37.674,54.126c7.482,0 10.953,5.679 11.683,13.745c0.174,1.93 -0.008,4.743 -0.255,8.001c-0.841,10.825 -1.808,24.128 5.4,24.128c6.096,0 9.228,-11.695 11.035,-25.027c1.745,-13.197 -0.103,-19.765 0.806,-25.625c1.73299,-11.103 11.425,-21.058 8.431,-35.214c-1.658,-7.853 -5.982,-11.547 -10.266,-13.1c-9.868,-3.592 -16.239,3.329 -26.834,3.329s-16.966,-6.921 -26.839,-3.329c-4.28,1.553 -8.604,5.247 -10.266,13.1c-2.99,14.156 6.698,24.111 8.435,35.214c0.908,5.86 -0.939,12.427 0.806,25.625c1.807,13.331 4.94,25.027 11.035,25.027c7.205,0 6.242,-13.303 5.4,-24.127c-0.248,-3.258 -0.428,-6.071 -0.255,-8.001c0.727,-8.067 4.244,-13.746 11.684,-13.746z" fill="#254ec2" style="fill: rgb(37, 78, 194);"></path></svg>'

$("body").prepend("<div style='display:inline-block'><img src='data:image/svg+xml;base64,"+encodeBase64(svg)+"' ><img src='data:image/svg+xml;base64,"+encodeBase64(svg)+"' ><img src='data:image/svg+xml;base64,"+encodeBase64(svg)+"' ><img src='data:image/svg+xml;base64,"+encodeBase64(svg)+"' ><img src='data:image/svg+xml;base64,"+encodeBase64(svg)+"' ><img src='data:image/svg+xml;base64,"+encodeBase64(svg)+"' ><img src='data:image/svg+xml;base64,"+encodeBase64(svg)+"' ></div>");
function encodeBase64(sentsvg){
var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(input){var output="";var chr1,chr2,chr3,enc1,enc2,enc3,enc4;var i=0;input=Base64._utf8_encode(input);while(i<input.length){chr1=input.charCodeAt(i++);chr2=input.charCodeAt(i++);chr3=input.charCodeAt(i++);enc1=chr1>>2;enc2=((chr1&3)<<4)|(chr2>>4);enc3=((chr2&15)<<2)|(chr3>>6);enc4=chr3&63;if(isNaN(chr2)){enc3=enc4=64;}else if(isNaN(chr3)){enc4=64;}
output=output+this._keyStr.charAt(enc1)+this._keyStr.charAt(enc2)+this._keyStr.charAt(enc3)+this._keyStr.charAt(enc4);}
return output;},decode:function(input){var output="";var chr1,chr2,chr3;var enc1,enc2,enc3,enc4;var...