JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" class="container-1">
    <svg viewBox="-100 -100 200 200">
        <circle cx="0" cy="0" r="50"></circle>
    </svg>
</div>

<button id="toggle">Toggle Size</button>

CSS

* {
    transition: all 250ms ease;
}
#container {
    position: absolute;
    /* To make the button clickable */
    left: 100px;
    top: 100px;
}

.container-1 {
    width: 300px;
    height: 250px; 
    /* Un-even width/height? No problem, preserveAspectRatio has your back */
}

.container-2 {
    width: 500px;
    height: 500px;
}

svg {
    width: 100%;
    height: 100%;
}

JavaScript

var currentState = false;
document.getElementById('toggle').onclick = function () {
    var container = document.getElementById('container')
    if (currentState)
        container.setAttribute('class', 'container-1');
    else
        container.setAttribute('class', 'container-2');
    
    currentState = !currentState;
}