Javascript 如何使SVG适应视口大小而不进行缩放？

在上了几门关于全堆栈开发和一点设计的课程之后，我终于敢于开始一个小的、我一直在思考的第一个项目

这表示我希望导航的外观

我面临的问题是，我不知道如何使SVG路径像我希望的那样突出导航比例（小ECG应该移动而不会被挤压，而它旁边的线条变小，请查看图片以了解我的意思）

这是SVG代码：

<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>

用草图创建。

---

你们知道如何处理这个问题吗？

正如我在上面所说的，你们可以将元素保持固定的大宽度，并将其置于容器的中心，使其溢出：

.container{
显示器：flex；
证明内容：中心；
溢出：隐藏；
}
svg{
宽度：1440px；
高度：63px；
}

用草图创建。

我会将其设置为固定宽度，并设置一个较大的值，然后使其溢出，这是可行的！有没有办法使线条无限延伸到两边？或者，唯一的伪造方法是给它一个很大的宽度？另外，你能解释一下为什么你需要在容器div中嵌套第二个div吗？@D.Breidert如果你尝试不使用第二个div，你会发现它会因为弹性盒而被拉伸，所以我不得不添加另一个；）。。。关于这些想法，当然还有其他办法，但这是我带来的，实际上我没有看到任何其他想法：）@TemamiAfif非常感谢！