如何通过标准化流程让SVG支持CSS任意尺寸缩放？

我从Google Material Symbols复制了一个Person图标SVG：

<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48">
        <path d="M24 23.95q-3.3 0-5.4-2.1-2.1-2.1-2.1-5.4 0-3.3 2.1-5.4 2.1-2.1 5.4-2.1 3.3 0 5.4 2.1 2.1 2.1 2.1 5.4 0 3.3-2.1 5.4-2.1 2.1-5.4 2.1ZM8 40v-4.7q0-1.9.95-3.25T11.4 30q3.35-1.5 6.425-2.25Q20.9 27 24 27q3.1 0 6.15.775 3.05.775 6.4 2.225 1.55.7 2.5 2.05.95 1.35.95 3.25V40Z" />
    </svg>

设置style='width: 20px; height: 20px;'时只能显示图标一小部分，移除width/height属性、设置width='100%'都没用；尝试用viewBox但不知道怎么确定合适尺寸。想找一个无需手动调整复杂参数的标准化流程，处理后就能用CSS自由控制SVG尺寸。

只需3步就能让SVG支持CSS自由缩放：

1. 替换固定宽高为1em
   把SVG的width="48"和height="48"改成width="1em"和height="1em"。这样SVG会继承父元素字体大小，也方便后续用CSS直接覆盖尺寸。

2. 添加viewBox="0 0 48 48"
   Google Material Symbols的图标默认画布尺寸都是48x48，直接填这个值就行——这是固定规则，不用自己计算。viewBox的作用是告诉SVG内部图形的坐标范围，确保缩放时图形完整显示。

3. 可选：添加基础样式优化布局
   加上style="display: inline-block; vertical-align: middle;"，解决SVG和文字对齐问题，让块级布局更友好。

处理后的最终SVG代码：

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48" style="display: inline-block; vertical-align: middle;">
  <path d="M24 23.95q-3.3 0-5.4-2.1-2.1-2.1-2.1-5.4 0-3.3 2.1-5.4 2.1-2.1 5.4-2.1 3.3 0 5.4 2.1 2.1 2.1 2.1 5.4 0 3.3-2.1 5.4-2.1 2.1-5.4 2.1ZM8 40v-4.7q0-1.9.95-3.25T11.4 30q3.35-1.5 6.425-2.25Q20.9 27 24 27q3.1 0 6.15.775 3.05.775 6.4 2.225 1.55.7 2.5 2.05.95 1.35.95 3.25V40Z" />
</svg>

之后就可以用CSS自由控制尺寸了，比如：

/* 固定像素尺寸 */
.icon { width: 20px; height: 20px; }
/* 用字体大小控制 */
.icon-large { font-size: 48px; }
/* 响应式缩放 */
.icon-responsive { width: 100%; max-width: 60px; }

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