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 550 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

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

JavaScript

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