使用use标签引入外部SVG后显示尺寸小于设定的32x32px如何解决

问题原因 #

1. SVG属性拼写不规范：SVG标准中viewBox为驼峰命名，全小写的viewbox无法被浏览器识别，无法正常计算缩放比例。
2. 视口尺寸不匹配：当前设置的viewBox="0 0 32 32"远大于图标路径的实际绘制范围（坐标区间约为0~14），内容仅占视口左上角区域，无法铺满32x32的容器。

解决方案 #

按以下步骤修改即可：

• 修正house.svg中symbol的viewBox属性拼写，同时将视口尺寸调整为匹配图标实际大小的0 0 14 14
• 给<use>标签添加width="100%" height="100%"属性，确保其占满父级SVG容器
• 本地测试时建议使用静态服务（如VS Code Live Server插件）打开页面，避免file协议下浏览器禁止加载本地外部SVG资源

修复后的完整代码 #

house.svg

<svg xmlns="http://www.w3.org/2000/svg" >
    <symbol viewBox="0 0 14 14" id="bsi-house">
        <path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
        <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
    </symbol>
</svg>

index.html 调用代码

<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px">
    <use href="./Assets/svg/icons/house.svg#bsi-house" width="100%" height="100%"></use>
</svg>

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