Responsive SVG dataviz

HTML

<p>Chart title...</p>

<div class='container'>
    <!-- legend has a fixed width, variable height -->
    
    
    <!-- chart plot resizes to use available space, respecting padding -->
    <svg class='plot-outer'>
        <svg class='plot'>
            
            <rect x='0%' y='0%' width='100%' height='100%' fill='#fff1e0'></rect>

            <g class="rory">
                <line class="rory" x1="5%" y1="85%" x2="20%" y2="87%"/>
                <line class="rory" x1="20%" y1="87%" x2="40%" y2="85%"/>
                <line class="rory" x1="40%" y1="85%" x2="60%" y2="74%"/>
                <line class="rory" x1="60%" y1="74%" x2="80%" y2="64%"/>
                <line class="rory" x1="80%" y1="64%" x2="95%" y2="44%"/>
            </g>

            <g class="axes">
                <line class="horizontal" x1="5%" y1="95%" x2="95%" y2="95%"/>
                <line class="vertical" x1="5%" y1="5%" x2="5%" y2="95%"/>
            </g>
            
        </svg>
    </svg>
</div>

CSS

* {
    position: relative;
    box-sizing: border-box;
}

.rory line{stroke:#b8b1a9;stroke-width:2px}
.rory:hover line{stroke:#9e2f50;stroke-width:2px}

.axes line{stroke:black;stroke-width:1px}

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: black;
    min-width: 20em;
    min-height: 20em;
    background-color:#fff1e0
}

.container {
    width: 100%;
    height: 0;
    padding-bottom: 95%;
}

svg {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}



svg svg {
    position: relative;
    overflow: visible;
}

rect {
    
    fill: none;
}

.plot rect {
    fill: #fff1e0;
}

.legend-outer {
    position: absolute;
    width: 16em;
    height: 100%;
    padding: 1em;
}

.data {
    fill: rgb(200,150,150);
}

.large {
    font-weight: 500;
    font-size: 18px;
}

pattern path {
    stroke: #ccc;
}