JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">stuff</div> 
 <div class="svg-wrap">
     <svg
         viewBox="0 0 550 350"
         preserveAspectRatio="xMinYMin meet"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         xml:space="preserve"
      >
	     <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

* {
    margin: 0;
    padding: 0;
}
html {background-color: pink;}    

.block {
    background-color:blue;
    height: 50px;
}

.svg-wrap {
    background-color:red;
    height:0;
    padding-top:63.63%;
    position: relative;
}

svg {
    background-color: cyan;
    height: 100%;
    display:block;
    width: 100%;
    position: absolute;
    top:0;
    left:0;
}

polyline {fill:none; stroke:#000000; stroke-miterlimit:10; stroke-width:30;}
rect {fill:green;}
text {font-size: 50px; }