convert svg into base64 for helmet pattern

Question

I have written simple svg :

 function Dot() {
  return (
    <svg width="12" height="12">
      <circle cx="50%" cy="50%" r="5.5" fill={headerColor} />
    </svg>
  );
}

I need to encode this in base64 for displaying in pageTitle. Is there some way how to do it ?

Answer 1

You can try using XMLSerializer to convert your SVG to a string, and then use btoa to convert the string to base64:

var str = new XMLSerializer().serializeToString(document.getElementById("svg"));
var encodedSVG = window.btoa(str);

Answer 2

It seems the function should return a string. Then you can use btoa to convert it into base64

 function Dot() { return '<svg width="12" height="12"><circle cx="50%" cy="50%" r="5.5" fill={headerColor} />' } var encodedString = btoa(Dot()); console.log(encodedString);