SVG follow the parent DIV adaptive

Return come back is this label SVG

       <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <g transform="translate(0  0)">
                        <rect x="0" y="0" width="100%" height="100%" fill="#EBECEF" stroke="#4F5052" stroke-width="1" />
                        <g transform="translate(586  0) rotate(90 0 0)">
                            <path bid="1" d="M305 0L305 383.5C305 495.34 214.34 586 102.5 586L0 586L0 0L305 0"
                                fill="#FFFFFF" stroke="#4F5052" stroke-width="1" />
                        </g>
                    </g>
                </svg>

　　Svg beginning of how to set the width height properties are not produced. . Not adaptive. See only a small part of it.

Later we see others plus a viewBox = "0,0,640,480", solved the problem. . The next check. That SVG viewBox for adaptation, four values ​​representing the minimum number of X-axis; minimum y-axes; width; height.

Knowing can be dynamically added to OK

    window.onload = function () {
        let svg = document.getElementsByTagName('svg');for (let index = 0; index < svg.length; index++) {
            svg[index].setAttribute("viewBox", "0,0,"+svg[index].getBBox().width+","+svg[index].getBBox().height+"")
        }
    }