I upload an svg file as follows:

if (event.target.files && event.target.files[0]) {
  let reader = new FileReader();

  reader.onloadend = upload => {
    let result = upload.target.result // in base64 format  
  };

  reader.readAsDataURL(file);  
}

The result is in base64 format. I am able to show this svg file in the DOM by using the img tag, but I want to use the svg tag.

How can show this svg file in the dom, by using an svg node in React?

I upload an svg file as follows:

if (event.target.files && event.target.files[0]) {
  let reader = new FileReader();

  reader.onloadend = upload => {
    let result = upload.target.result // in base64 format  
  };

  reader.readAsDataURL(file);  
}

The result is in base64 format. I am able to show this svg file in the DOM by using the img tag, but I want to use the svg tag.

How can show this svg file in the dom, by using an svg node in React?

• javascript
• reactjs
• svg

4 Answers 4

    import React from "react";
import ReactDOM from "react-dom";

const loadSVG = container => {
  var dataURL =
    "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgdmlld0JveD0iMCAtMTAgMTAwIDg1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGRlZnM+CiAgICAgICAgPGNsaXBQYXRoIGlkPSJjbGlwIj4KICAgICAgICAgICAgPHBhdGggZD0iTTAsMCBMMTAwLDAgTDEwMCw3NSBMMCw3NSBMMCwwCiAgICAgICAgICAgICAgICAgICAgIE01MCwxNSBBMjAsMjAgMCAxLDAgNTAsNjAgQTIwLDIwIDAgMSwwIDUwLDE1CiAgICAgICAgICAgICAgICAgICAgIE01MCwyNSBBMTIuNSwxMi41IDAgMSwxIDUwLDUwIEExMi41LDEyLjUgMCAxLDEgNTAsMjUiLz4KICAgICAgICA8L2NsaXBQYXRoPgogICAgPC9kZWZzPgogICAgPHJlY3QgeD0iMzAiIHk9Ii0xMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjIwIiByeD0iMTAiIHJ5PSIxMCIvPgogICAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSI3NSIgcng9IjE1IiByeT0iMTUiIGNsaXAtcGF0aD0idXJsKCNjbGlwKSIvPgo8L3N2Zz4K";
  var xhr = new XMLHttpRequest();
  xhr.open("GET", dataURL);
  xhr.addEventListener("load", function(ev) {
    var xml = ev.target.response;
    var dom = new DOMParser();
    var svg = dom.parseFromString(xml, "image/svg+xml");
    container.appendChild(svg.rootElement);
  });
  xhr.send(null);
};

const App = () => {
  React.useEffect(() => {
    loadSVG(refContainer.current);
  }),
    [];
  const refContainer = React.useRef(null);
  return <div ref={refContainer} />;
};

Building on Peter's answer:

function SVG() {
    let svg = atob("PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgMTIwIj48c3R5bGU+LnN0MHtmaWxsOiNiY2JiYmJ9LnN0MXtmaWxsOiNmNDgwMjN9PC9zdHlsZT48cGF0aCBjbGFzcz0ic3QwIiBkPSJNODQuNCA5My44VjcwLjZoNy43djMwLjlIMjIuNlY3MC42aDcuN3YyMy4yeiIvPjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0zOC44IDY4LjRsMzcuOCA3LjkgMS42LTcuNi0zNy44LTcuOS0xLjYgNy42em01LTE4bDM1IDE2LjMgMy4yLTctMzUtMTYuNC0zLjIgNy4xem05LjctMTcuMmwyOS43IDI0LjcgNC45LTUuOS0yOS43LTI0LjctNC45IDUuOXptMTkuMi0xOC4zbC02LjIgNC42IDIzIDMxIDYuMi00LjYtMjMtMzF6TTM4IDg2aDM4LjZ2LTcuN0gzOFY4NnoiLz48L3N2Zz4=");
    return <div dangerouslySetInnerHTML={{ __html: svg }} />;
}

You need to make sure that you have a clean SVG file with the <svg> tag opening and closing:

<svg xmlns="http://www.w3/2000/svg" viewBox="0 0 120 120">
    <style>.st0{fill:#bcbbbb}.st1{fill:#f48023}</style>
    <path class="st0" d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z"/>
    <path class="st1" d="M38.8 68.4l37.8 7.9 1.6-7.6-37.8-7.9-1.6 7.6zm5-18l35 16.3 3.2-7-35-16.4-3.2 7.1zm9.7-17.2l29.7 24.7 4.9-5.9-29.7-24.7-4.9 5.9zm19.2-18.3l-6.2 4.6 23 31 6.2-4.6-23-31zM38 86h38.6v-7.7H38V86z"/>
</svg>

StackBlitz link

You can use atob() to decode base64, so this should work:

render() {
    return <div dangerouslySetInnerHTML={{ __html: atob(base64String) }} />
}

Print SVG file directly to Printer

const svgNode = ReactDOM.findDOMNode(avatarRef.current);
const data = svgNode.outerHTML; 
console.log(data); 
const svg = new Blob([data], { type: "image/svg+xml" }); 
const content = data; 
const printWindow = window.open("", ""); 
printWindow.document.write(content); 
printWindow.document.close();
printWindow.print();