JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">stuff</div> 

    <div class="svg-wrap">
        <svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 350" xml:space="preserve" preserveAspectRatio="xMinYMin meet" height="100%" width="100%">
	
	        <rect x="0" y="0" width="550" height="350"/>
            <polyline points="0,0 0,350 550,350"/>
            <text x="0" y="50%" fill="#ffffff" stroke="none" width="100%">Simplified example</text>
        </svg>
    
    </div>
    <div class="block">stuff</div>

CSS

html, body {background-color: pink; margin:0; padding:0; width: 100%;}    
.svg-wrap {background-color:red; padding:0; margin:0; width: 100%; height: 100%; }
.block {background-color:blue; padding:0; margin:0; height: 50px;}
svg {cursor:pointer; background-color: cyan; margin:0; padding:0; height: 100%; display:block;}
    circle {fill:#005B88;}
	polyline {fill:none; stroke:#000000; stroke-miterlimit:10; stroke-width:30;}
    rect {fill:green;}
text {font-size: 50px; }

JavaScript

/* Responsive SVG, Fill the whole parent width \\\\\\\\\ */