Web应用开发中SVG最优viewBox尺寸的通用最佳实践是什么？

目前行业不存在强制的统一规范，但已经形成了被绝大多数主流设计系统、开源图标库认可的事实标准，你观察到的两个尺寸正是当前应用最广的选型：

• 0 0 24 24 是轮廓风格图标的通用标准
  这个尺寸的普及度最高，核心优势是24可以被2、3、4、6、8、12整除，做网格对齐、等比缩放时的计算成本极低，1px宽度的描边在24px的渲染尺寸下可以完美对齐物理像素，不会出现边缘发虚的问题，绝大多数通用场景的界面图标库都采用这个尺寸作为默认规格。
• 0 0 20 20 是小尺寸实心功能图标的常用标准
  这个规格更适合渲染尺寸在20px及以下的场景（比如按钮内嵌图标、紧凑导航栏图标），实心图形在20格网格下做像素对齐的表现更好，小尺寸下的图形识别度更高，不少偏紧凑风格的设计系统会用这个尺寸做功能图标。

如果你希望整个应用统一用单一viewBox尺寸，优先选0 0 24 24：

选型理由很实际：

1. 生态适配成本最低，几乎所有主流开源图标库都默认提供24尺寸的资源，后续新增、替换图标不需要额外做尺寸转换
2. 实心图标完全可以在24的viewBox网格下规范绘制，只要做好图形权重调整，小尺寸渲染的清晰度不会比20尺寸的差
3. 常用的界面图标渲染尺寸（16、24、32、48px）和24的缩放比都是整数或者容易对齐的数值，能最大程度避免缩放导致的模糊问题

最后需要注意：比选哪个尺寸更重要的是，确定尺寸后所有自绘图标都要严格对齐对应网格，描边、图形拐点尽量落在整数坐标上，这才是保证SVG图标渲染清晰的核心。

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