如何让SVG宽高自动匹配<use>引用的symbol子元素尺寸？

我使用<use>元素从外部SVG中引用<symbol>，<use>元素尺寸为正确的100x100，但外层<svg>仍保持默认的300x150尺寸。请问是否存在非JavaScript、非硬编码的方法，让SVG尺寸匹配其子元素大小？

相关代码 #

HTML代码 #

<svg><use href="icon.svg#icon" /></svg>

外部SVG代码（icon.svg） #

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="icon" viewBox="0 0 100 100" width="100" height="100">
        <rect width="100" height="100" />
    </symbol>
</svg>

已尝试但无效的方法 #

• 为外层<svg>设置min-content/fit-content的width和height。
• 不使用外层<svg>元素，直接在<use>上添加xmlns="http://www.w3.org/2000/svg"。

方法一：直接使用<use>作为独立元素（无需外层SVG） #

之前的尝试无效是因为缺少必要的布局样式设置。直接将<use>作为顶级元素，添加SVG命名空间并设置display: inline-block，即可自动匹配<symbol>的尺寸：

<use href="icon.svg#icon" xmlns="http://www.w3.org/2000/svg" style="display: inline-block;" />

这个方法无需硬编码尺寸，也不需要JavaScript，<use>会继承外部<symbol>定义的宽高，设置inline-block后浏览器会正确渲染其实际大小。

方法二：给外层SVG设置匹配的viewBox并自适应尺寸 #

如果必须保留外层SVG，可以给它设置与<symbol>一致的viewBox，再通过CSS实现自适应：

<svg viewBox="0 0 100 100" style="width: fit-content; height: auto;">
    <use href="icon.svg#icon" />
</svg>

这里的viewBox需要和<symbol>的viewBox匹配（可通过CSS变量统一管理，减少重复修改），width: fit-content会让外层SVG根据内部<use>的尺寸自动调整宽度，height: auto则按viewBox的宽高比自动计算高度。

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