viewbox决定svg内部坐标系的取景范围和比例关系，width/height仅控制渲染尺寸；不设viewbox会导致非响应式缩放、拉伸变形；其值必须为“min-x min-y width height”四个数字，顺序不可错，且需与图形实际边界匹配。
viewBox 是什么，为什么不能只靠 width/height 控制缩放
直接说结论：viewBox 决定 SVG 内部坐标系的“取景范围”和“比例关系”，而 width 和 height 只控制最终渲染尺寸。不设 viewBox，SVG 就不会响应式缩放，拉伸变形几乎是必然的。
常见错误现象：SVG 在不同屏幕下被压扁、文字突然变小、图标边缘被裁掉——往往就是漏了 viewBox，或值写错了。
-
viewBox值必须是四个数字：min-x min-y width height，顺序不能错 - 绝大多数图标类 SVG，
min-x和min-y都是0，比如viewBox="0 0 24 24" -
width/height设为100%或具体像素都行，但必须配合viewBox才能保持宽高比 - 如果原始 SVG 文件里已有
viewBox，手动覆盖时要确认数值和设计稿导出设置一致（比如 Figma 导出常默认0 0 100 100）
怎么从设计稿或原始 SVG 中提取正确的 viewBox 值
别猜，也别硬套 24×24。真实项目里，viewBox 必须和图形实际边界匹配，否则会留白或截断。
最稳妥的方法是打开原始 SVG 文件（文本编辑器即可），找 <svg> 标签里的 <code>viewBox 属性；没有的话，看有没有 width 和 height，再结合 <g></g> 或 <path></path> 的 d 属性大致估算边界。
- 用浏览器开发者工具选中 SVG 元素，Elements 面板里右键 → “Edit as HTML”，直接改
viewBox并实时预览效果 - 如果图形明显偏左，可能是
min-x太大；顶部有大片空白？检查min-y是否非零 - 导出自 Sketch/Figma 的 SVG，常带冗余
transform，建议先用 SVGOMG 清理，再确认viewBox
viewBox 和 preserveAspectRatio 配合控制对齐与裁剪
仅设 viewBox 还不够。当容器宽高比和 viewBox 宽高比不一致时，浏览器默认按 preserveAspectRatio="xMidYMid meet" 处理——居中、等比缩放、不裁剪。
但有时你需要别的行为，比如铺满容器（允许裁剪）、左对齐、顶部对齐。
- 强制铺满不保持比例：
preserveAspectRatio="none"（慎用，易失真） - 居中、等比、裁剪多余部分：
preserveAspectRatio="xMidYMid slice" - 左上角对齐不裁剪：
preserveAspectRatio="xMinYMin meet" - 这个属性必须和
viewBox同时存在才生效；单独写没用
React/Vue 中动态插入 SVG 时 viewBox 容易被覆盖
框架内通过 dangerouslySetInnerHTML 或 v-html 插入 SVG 字符串时，如果原始字符串不含 viewBox，它不会自动补上。更隐蔽的问题是：某些构建工具（如 Webpack 的 svg-url-loader）或 UI 库（如 Ant Design 图标）会剥离或重写 viewBox。
- 在插入前用正则校验：
svgString.includes('viewBox')，不包含就手动注入 - Vue 模板中直接写内联 SVG 更可控：
<svg viewbox="0 0 24 24"><path d="..."></path></svg> - React 中用
React.createElement动态生成 SVG 时，确保viewBox作为 prop 传入，且 key 为字符串"viewBox"（不是"viewbox"，大小写敏感）
viewBox 不是装饰性属性，它是 SVG 响应式行为的基石。值错一位、漏一个 0，整个图标就可能消失在左上角之外——这种问题在移动端适配时尤其难排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
