使用`<use>`与`<img>`引用SVG时渲染尺寸不一致问题排查

问题原因 #

使用<use>引用精灵图时，外层包裹的<svg>标签未设置viewBox属性。浏览器渲染无viewBox的SVG时，会采用默认的内部坐标系统（通常为150px宽的容器），再根据symbol内容的实际绘制范围计算高度，导致最终尺寸与<img>引用的独立SVG不一致。而独立SVG文件自带viewBox="0 0 54 54"，<img>能自动识别这个1:1的比例，按容器宽度等比缩放，保持正方形尺寸。

解决方案 #

给外层的<svg>添加与symbol一致的viewBox属性即可：

修改后的index.html #

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            div {
                display: flex;
                flex-direction: column;
                max-width: 10rem;
            }
            img, svg {
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div>
            <!-- 添加与symbol匹配的viewBox -->
            <svg viewBox="0 0 54 54">
                <use href="./icon-sprite.svg#icon" />
            </svg>
            <img src="./icon.svg" />
        </div>
    </body>
</html>

原理说明 #

viewBox定义了SVG内容的坐标范围和比例，外层<svg>通过这个属性明确如何缩放内部引用的symbol内容，确保和独立SVG保持相同的缩放逻辑。即使后续调整容器尺寸，也能维持1:1的正方形比例，不会出现拉伸或尺寸偏差。

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