为何SVG未根据内容自适应尺寸？如何去除多余空白？

一、浏览器默认300×150尺寸的原因 #

当SVG未显式指定width和height属性时，根据SVG规范，浏览器会使用**默认内在尺寸300px（宽）×150px（高）**作为 fallback，这是所有主流浏览器遵循的标准行为。

二、去除多余空白并实现内容自适应尺寸的方法 #

你提到不想通过调整viewBox导致内容放大，其实只要正确设置viewBox匹配内容实际范围，就能既去除空白又保持内容原始大小，同时实现自适应。以下是具体方案：

方案1：手动设置匹配内容的viewBox+自动尺寸 #

1. 先分析SVG内容的坐标范围：
   • 你的元素覆盖的最小/最大坐标：x从7（circle左边缘）到34（text右边缘），y从8（text顶部）到35（line底部）
2. 给SVG添加viewBox属性，值为"7 8 27 27"（格式：min-x min-y width height，其中width=34-7=27，height=35-8=27）
3. 不设置固定的width和height，或设为width="auto" height="auto"，让SVG根据viewBox自动适配内容尺寸

修改后的SVG代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="7 8 27 27" b-5x9jur1f24>
  <g b-5x9jur1f24>
    <circle cx="10" cy="15" r="3" b-5x9jur1f24></circle>
    <text x="20" y="18" b-5x9jur1f24>My</text>
  </g>
  <line x1="10" y1="15" x2="10" y2="35" stroke="black" b-5x9jur1f24></line>
</svg>

方案2：手动计算并设置固定width/height+调整元素位置（不使用viewBox） #

如果你完全不想用viewBox，可以：

• 计算内容的总宽度（34-7=27）和总高度（35-8=27），给SVG设置width="27"和height="27"
• 将所有元素的坐标向左上偏移，让内容贴合SVG左上角：比如把circle的cx改为3（10-7），cy改为7（15-8）；text的x改为13（20-7），y改为10（18-8）；line的x1/x2改为3，y1改为7，y2改为27（35-8）

修改后的代码示例：

<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" b-5x9jur1f24>
  <g b-5x9jur1f24>
    <circle cx="3" cy="7" r="3" b-5x9jur1f24></circle>
    <text x="13" y="10" b-5x9jur1f24>My</text>
  </g>
  <line x1="3" y1="7" x2="3" y2="27" stroke="black" b-5x9jur1f24></line>
</svg>

注意：方案2需要手动调整所有元素坐标，维护成本高，更推荐方案1。

内容的提问来源于stack exchange，提问作者Ethel