Turning an SVG string into an image in a React component

by

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="<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>";
        return (
            <div>
              <img src={`data:image/svg+xml;utf8,${encodeURIComponent(image)}`} />
            </div>
        )
    }
}

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

Leave a Comment