JSFiddle - React, Tailwind, and code Playground

by David_Knowles

HTML

<div class="block">blue block top</div> 
    <div class="svg-wrap-outer">
        <div class="svg-wrap-inner">
            <svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 350" preserveAspectRatio="xMinYMin meet">
	            <rect x="0" y="0" width="550" height="350"/>
                <polyline points="0,0 0,350 550,350"/>
                <text x="0" y="50%" width="100%">Simplified example</text>
            </svg>
        </div>
    </div>
    <div class="block">blue block bottom</div>

CSS

html, body {background-color:pink; margin:0; padding:0; width: 100%;} 
.block {background-color:blue; padding:0; margin:0; height: 50px; color: #fff;}
.svg-wrap-outer {width: 100%; padding-top:63.636363636364%; position: relative;} 
.svg-wrap-inner {position:absolute; top:0; left:0; right:0; bottom:0;}
svg {background-color: cyan; display:block;}
polyline {fill:none; stroke:#000000; stroke-miterlimit:10; stroke-width:30;}
rect {fill:green;}
text {font-size:50px; fill:#fff; stroke:none;}

JavaScript

/* Responsive SVG, Fill the whole parent width using padding percentage ratio \\\\\\\\\ */