JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Circle of radius 50 with center (50,50)</h3>
<hr />
<h4>No viewbox:</h4>
<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="50" fill="red"></circle>
</svg>
<hr />
<h4>viewBox="0 0 100 100"</h4>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50" fill="red"></circle>
</svg>
<hr />
<h4>viewBox="0 0 50 50"</h4>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
    <circle cx="50" cy="50" r="50" fill="red"></circle>
</svg>
<hr />
<h4>viewBox="50 0 50 50"</h4>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="50 0 50 50">
    <circle cx="50" cy="50" r="50" fill="red"></circle>
</svg>
<hr />
<h4>viewBox="0 50 50 50"</h4>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 50 50 50">
    <circle cx="50" cy="50" r="50" fill="red"></circle>
</svg>
<hr />
<h4>viewBox="50 50 50 50"</h4>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="50 50 50 50">
    <circle cx="50" cy="50" r="50" fill="red"></circle>
</svg>

CSS

svg {
    border: 1px solid blue;
    width: 50%;
    height: 50%;
}