JSFiddle - React, Tailwind, and code Playground

HTML

<div><h3>Example 1</h3>
<svg width="100" height="100">
    <circle cx="20" cy="40" r="10" fill="blue"></circle>
</svg>
</div>

<div><h3>Example 2</h3>
    <div>changing the width and height of the svg does not change the size of the circle</div>
<svg width="150" height="150">
    <circle cx="20" cy="40" r="10" fill="blue"></circle>
</svg>
</div>
<div><h3>Example 3</h3>
    <div>but setting the viewBox to reflect the original size scales it to the new width and height</div>
<svg width="150" height="150" viewBox="0 0 100 100">
    <circle cx="20" cy="40" r="10" fill="blue"></circle>
</svg>
</div>
<div><h3>Example 4</h3>
    <div>By setting the viewBox you can also 'crop' the image</div>
<svg width="150" height="150" viewBox="10 30 20 20">
    <circle cx="20" cy="40" r="10" fill="blue"></circle>
</svg>
</div>

CSS

svg {
    margin: 0.5em 0;
    border: 1px solid red;
}

h3 {
    margin-bottom: 0.25em;
}