SVG：固定高度的流体宽度

Question

所以我有这个SVG，我想要响应。当我使用preserveAspectRatio="none"时，它工作正常，但当我调整浏览器窗口大小时，结果非常丑陋和像素化。如何实现流体宽度和固定高度？

<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 663 38" height="38" preserveAspectRatio="none">

请参阅此处的完整示例：https://codepen.io/billy_sengsey/pen/LOmXXQ

调整大小之前：

调整大小后：