SVG Sprite双viewBox属性作用及使用问题技术咨询

1. 与引用

• <symbol>上的viewBox：定义图标内部图形的固有坐标系与边界。它是图标绘制时的「原始画布」，比如0 0 24 24意味着图标所有图形元素（如<path>）的坐标都基于24x24的网格，确保图标自身的比例、形状不受外部容器影响。如果省略这个属性，当外部容器尺寸变化时，图标可能出现挤压、拉伸变形。
• 引用图标时的<svg>上的viewBox：定义显示容器的视口映射规则。它负责将<symbol>的内容适配到当前页面的显示区域：比如给引用<svg>设viewBox="0 0 24 24"，同时设置width="48"，图标会等比例放大到48px宽；如果不设这个viewBox，只指定width/height，图标会以原始尺寸渲染，超出容器的部分会被裁剪。

2. viewBox取值的依据 #

• 0 0 24 24这类规整值：是UI图标设计的标准画布尺寸（如Material Icons、Font Awesome等常用库的规范）。前两个值0 0表示坐标系从画布左上角开始，后两个值是统一的画布宽高，方便图标之间对齐、复用，减少适配成本。
• 241.061 241.061这类精确值：是图标原始图形的最小包围盒尺寸。一般是矢量软件（如Illustrator、Figma）导出时，自动计算的图形实际占用的边界大小，目的是消除多余空白，让图标尺寸完全匹配图形本身，适合需要精确尺寸控制的场景。

补充：外部SVG Sprite引用不显示的原因 #

外部SVG文件必须添加xmlns="http://www.w3.org/2000/svg"属性——浏览器依赖这个属性识别SVG文档类型，没有它的话，无法正确解析内部的<symbol>元素，导致<use>引用找不到对应图标。

内容的提问来源于stack exchange，提问作者Léa Massiot