网格中的 SVG 大小问题

Question

我正在尝试使用网格构建一个包含三个元素的简单页面。我有两列和两行，我可以让一切都相对合适但并不完美。最初我在将 SVG 对齐到其网格区域的左侧时遇到了问题，但是通过对 SVG 应用 preserveAspectRatio="xMinYMin meet" 解决了这个问题，虽然我认为这也解决了大小问题，但我错了。

代码如下：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 324 413.28" preserveAspectRatio="xMinYMin meet"><defs><style>.\39 87963d1-4950-4385-bc18-04565e4b4968{fill:#005cb9;}</style></defs><rect class="987963d1-4950-4385-bc18-04565e4b4968" x="18" y="18.12" width="288" height="324"/></svg>

header {
  display: grid;
  grid-template-columns: fit-content auto;
}

header>img {
  width: 100%;
  max-height: 70%;
}

header>div {
  justify-self: center;
  text-align: center;
}

header>nav {
  grid-column: span 2;
}

<header>
  <img src="images/logo.svg" alt="Logo">
  <div>
    <h1>Heading</h1>
    <p>Text Line 1</p>
    <p>Text Line 2</p>
    <p>Text Line 3</p>
  </div>
  <nav>
    <a href="#">Menu 1</a>
    <a href="#">Menu 2</a>
    <a href="#">Menu 3</a>
    <a href="#">Menu 4</a>
    <a href="#">Menu 5</a>
    <a href="#">Menu 6</a>
  </nav>
</header>

如果你试一试，你会发现尽管图像有一定大小，但它占用的空间比它应该占用的空间多。因此，图像的网格区域比应有的宽，导致其右侧的文本无法正确居中。对于我的生活，我无法弄清楚如何在没有硬编码宽度和高度的情况下让 SVG 发挥出色，这是不行的。

感谢您的帮助！