Render React SVG component as backgroundImage - reactjs

Question

I am trying to render a React Component that returns an <svg> as a backgroundImage of a <div>.
Currently I am using ReactDOMServer with renderToStaticMarkup or renderToString but nothing shows up:
const SvgComponent = () => {
return (
<svg xmlns='http://www.w3.org/2000/svg'><rect fill='red' x='0' y='0' /></svg>
)
}
const ParentComponent = () => {
return (
<div
className={classes.banner}
style={{
backgroundImage: `url("data:image/svg+xml;utf8, ${ReactDOMServer.renderToStaticMarkup(<SvgComponent />)} ")`
}}
>
</div>
)
}
Would the package jsx-to-string the way to do it?

Answer 1

You have to use encodeURIComponent() to URI encode the SVG data because React will not render the SVG data if it is not URI encoded. So,
const svgString = encodeURIComponent(renderToStaticMarkup(<SvgComponent />));
Also, set the width and height in <rect> of SVG like,
<rect fill="red" width={100} height={100} />
So final code should look like,
import ReactDOM from "react-dom";
import { renderToStaticMarkup } from "react-dom/server";
import React from "react";
const SvgComponent = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg">
<rect fill="red" width={100} height={100} />
</svg>
);
};
const ParentComponent = () => {
const svgString = encodeURIComponent(renderToStaticMarkup(<SvgComponent />));
return (
<div
style={{
backgroundImage: `url('data:image/svg+xml;utf8, ${svgString}')`,
width:500,
height:500
}}
>
</div>
)
}
ReactDOM.render(<ParentComponent />, document.getElementById("root"));
I have setup the same in CodeSandbox,

Answer 2

ReactDOMServer.renderToStaticMarkup uses double quotes in the markup, so it returns
<svg xmlns="http://www.w3.org/2000/svg"><rect fill="red" width="10" height="10"></rect></svg>
And because you also used double quotes in url("...") it gives invalid markup.
So just use single quotes in url('...') and it should work.
Note: This will probably break if react changes how renderToStaticMarkup is implemented!