JSFiddle - React, Tailwind, and code Playground

HTML

<svg id='mysvg' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 400 400'>
    <circle
        fill='#000000'
        stroke='#000000'
        stroke-width='10'
        cx='105'
        cy='105'
        r='90'></circle>
    <circle
        fill='none'
        stroke='#0000FF'
        stroke-width='10'
        cx='300'
        cy='105'
        r='90' ></circle>
</svg>
<div id="mydiv"></div>

CSS

#mysvg, div {
    float: left;
    width: 10em;
    height: 10em;
}

div {
    outline: 2px dashed red;
    background-size: cover;
    background-image:  url("data:image/svg+xml;utf8,
<svg id='mysvg' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 400 400'>
    <circle
        fill='#000000'
        stroke='#000000'
        stroke-width='10'
        cx='105'
        cy='105'
        r='90'></circle>
    <circle
        fill='none'
        stroke='#0000FF'
        stroke-width='10'
        cx='300'
        cy='105'
        r='90' ></circle>
</svg>");
}