How can I make this SVG adapt to viewport size without scaling?

Question

I finally dared to start on a small, first project I was thinking about for a while after taking a few courses on full-stack developement and a little bit of design.

This small sketch represents how I would like my navigation to look.

The problem I'm facing is that I don't know how I would make the SVG Path that underlines the nav scale like I want it to (The little ECG thingy should move without being squished while the lines next to it get smaller, check the picture to see what I mean).

This is the SVG Code:

<svg width="1440px" height="63px" viewBox="0 0 1440 63" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Desktop-HD" transform="translate(0.000000, -20.000000)" stroke="#000000">
        <path d="M0,75 L684.996099,75 C686.664718,71.6666667 688.332684,70 690,70 C691.667316,70 693.333982,71.6666667 695,75 L712.215347,75 L715,82.3654775 L720,20 L725,78.2084488 L726.833442,75 L745,75 C748.15577,68.3333333 751.489104,65 755,65 C758.510896,65 761.84423,68.3333333 765,75 L1440,75" id="Path-3"></path>
    </g>
</g>

Do you guys have any idea on how to approach this?

Answer 1

As I commented above you can keep your element with a fixed big width and center it within the container and make it overflowing:

 .container { display: flex; justify-content: center; overflow: hidden; } svg { width: 1440px; height: 63px; } 

 <div class="container"> <div> <svg width="1440px" height="63px" viewBox="0 0 1440 63" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Desktop-HD" transform="translate(0.000000, -20.000000)" stroke="#000000"> <path d="M0,75 L684.996099,75 C686.664718,71.6666667 688.332684,70 690,70 C691.667316,70 693.333982,71.6666667 695,75 L712.215347,75 L715,82.3654775 L720,20 L725,78.2084488 L726.833442,75 L745,75 C748.15577,68.3333333 751.489104,65 755,65 C758.510896,65 761.84423,68.3333333 765,75 L1440,75" id="Path-3"></path> </g> </g> </svg> </div> </div>