Turning An Svg String Into An Image In A React Component

I have a dynamically generated SVG string in a React component. I want to embed this as an image in the component. Currently, I'm using something along the lines of: class SomeComp

Solution 1:

Since the SVG is dynamically generated and you can't store it as an asset, as an alternative to dangerouslySetInnerHTML, you could simply set it as a Data URI on the image. So something like...

class SomeComponent extends React.Component {
    render() {
        const image = '<svgxmlns="http://www.w3.org/2000/svg"version="1.2"baseProfile="tiny"width="47.4"height="40.65"viewBox="21 18.5 158 135.5"><pathd="M25,50 l150,0 0,100 -150,0 z"stroke-width="4"stroke="black"fill="rgb(128,224,255)"fill-opacity="1" ></path><pathd="M25,50 L175,150 M25,150 L175,50"stroke-width="4"stroke="black"fill="black" ></path><gtransform="translate(0,0)"stroke-width="4"stroke="black"fill="none" ><circlecx="100"cy="30"r="7.5"fill="black" ></circle><circlecx="70"cy="30"r="7.5"fill="black" ></circle><circlecx="130"cy="30"r="7.5"fill="black" ></circle></g></svg>';
        return (
            <div><imgsrc={`data:image/svg+xml;utf8,${image}`} /></div>
        )
    }
}

See post here: https://css-tricks.com/lodge/svg/09-svg-data-uris/

Solution 2:

One thing you can do is to convert your svg string to base64 and then use it like this:

const image = '<svgxmlns="http://www.w3.org/2000/svg"version="1.2"baseProfile="tiny"width="47.4"height="40.65"viewBox="21 18.5 158 135.5"><pathd="M25,50 l150,0 0,100 -150,0 z"stroke-width="4"stroke="black"fill="rgb(128,224,255)"fill-opacity="1" ></path><pathd="M25,50 L175,150 M25,150 L175,50"stroke-width="4"stroke="black"fill="black" ></path><gtransform="translate(0,0)"stroke-width="4"stroke="black"fill="none" ><circlecx="100"cy="30"r="7.5"fill="black" ></circle><circlecx="70"cy="30"r="7.5"fill="black" ></circle><circlecx="130"cy="30"r="7.5"fill="black" ></circle></g></svg>';
const buff = new Buffer(image);
const base64data = buff.toString('base64');

return <imgsrc='data:image/svg+xml;base64,${base64data }'alt="" />

if you don't want to use buffer, use this:

const base64data = btoa(unescape(encodeURIComponent(image)));

Solution 3:

Simply use this package: https://github.com/gilbarbara/react-inlinesvg

Example:

importSVGfrom'react-inlinesvg';

...    

const mySVG = '<svg xmlns="http://www.w3.org/2000/svg">...</svg>';
return<SVGsrc={mySVG} />;

Solution 4:

React ref with innerHTML works quite well and is clean.

var image = '<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="47.4" height="40.65" viewBox="21 18.5 158 135.5"><path d="M25,50 l150,0 0,100 -150,0 z" stroke-width="4" stroke="black" fill="rgb(128,224,255)" fill-opacity="1" ></path><path d="M25,50 L175,150 M25,150 L175,50" stroke-width="4" stroke="black" fill="black" ></path><g transform="translate(0,0)" stroke-width="4" stroke="black" fill="none" ><circle cx="100" cy="30" r="7.5" fill="black" ></circle><circle cx="70" cy="30" r="7.5" fill="black" ></circle><circle cx="130" cy="30" r="7.5" fill="black" ></circle></g></svg>';


constuseApp = () => {
  const svgWrapperRef = React.useRef();
  React.useEffect(() => {
    svgWrapperRef.current.innerHTML = image;
  }, [])
  return {
    svgWrapperRef
  }
}
constApp = () => {
  const {svgWrapperRef} = useApp()
  return (
    <divref={svgWrapperRef}></div>
  )
}

const root = document.getElementById('root')

ReactDOM.render(<App />, root)

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script><divid="root"></div>

Good Luck...

Solution 5:

I would store the svg image in a separate folder(assets), and import the image into the react component

Something like this:

SomeComponent.js:

import { SampleImage } from'../assets/SomeFile';

classSomeComponentextendsReact.Component {
    render() {

        return (
            <div>
              <imgsrc={SampleImage} /><div/>
        )
    }
}

SomeFile.svg:

<?xmlns="http://www.w3.org/2000/svg" version="1.2"encoding="UTF-8"?><svgbaseProfile="tiny"width="47.4"height="40.65"viewBox="21 18.5 158 135.5"><pathd="M25,50 l150,0 0,100 -150,0 z"stroke-width="4"stroke="black"fill="rgb(128,224,255)"fill-opacity="1" ></path><pathd="M25,50 L175,150 M25,150 L175,50"stroke-width="4"stroke="black"fill="black" ></path><gtransform="translate(0,0)"stroke-width="4"stroke="black"fill="none" ><circlecx="100"cy="30"r="7.5"fill="black" ></circle><circlecx="70"cy="30"r="7.5"fill="black" ></circle><circlecx="130"cy="30"r="7.5"fill="black" ></circle></g></svg>