JSFiddle - React, Tailwind, and code Playground

HTML

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="400px" height="200px" viewBox="0 0 400 200" enable-background="new 0 0 400 200" xml:space="preserve">
<path fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M99,100.02l80.97-51.323
	C163.016,22.165,133.305,4.574,99.484,4.574c-52.713,0-95.446,42.732-95.446,95.445c0,52.714,42.732,95.447,95.446,95.447
	c33.831,0,63.548-17.602,80.5-44.146L99,100.02z"/>
<text transform="matrix(1 0 0 1 184.0039 126)" font-family="'TimesNewRomanPSMT'" font-size="72">MENU</text>
</svg>
<div id="height">
</div>
<div id="width">
</div>

CSS

svg {
  border: 1px solid red;
/* height: auto;
  width: 300px; */
}

#height {
  margin-top: 0px;
}

JavaScript

var height=document.getElementById('Layer_1').offsetHeight;
var width=document.getElementById('Layer_1').offsetWidth;
document.getElementById('height').innerHTML = "height: "+height+" px";
document.getElementById('width').innerHTML = "width: "+width+" px";

/*

To experiment with scaling this SVG, delete the following from HTML line 5: width="400px" height="200px"

Then use CSS to change only the height or the width, leaving the one you don't change set to "auto".

*/