SVG渲染前提必须是显式声明viewBox，它定义内部坐标系范围与缩放基准；width仅控制外部占位，二者宽高比不匹配会导致拉伸、留白或消失，响应式推荐width="100%" + height="auto"。
别硬设 width 和 height 像素值——这是 SVG 模糊、拉伸、消失的头号原因。真正控制尺寸的核心是 viewBox，它定义坐标系缩放基准；width 只管外部占位，二者必须协同，不能各自为政。
viewBox 不是可选属性，而是 SVG 渲染的前提
没有 viewBox 的 <svg> 在旧版 Safari 直接不渲染，现代浏览器也会按默认 300×150 容器处理，导致图形被极度压缩或比例崩坏。它不是“美化选项”，而是告诉浏览器：“我内部内容的逻辑画布范围是这个”。
-
viewBox="0 0 24 24"表示图形设计在 24×24 的抽象坐标系里，所有cx、x、r等值都基于此单位 - 若实际图形坐标超出该范围（比如
<circle cx="50" cy="50" r="10">），图形会显示不全或完全不可见 - Figma / Illustrator 导出的图标通常自带正确
viewBox，但复制进 HTML 后务必确认数值是否匹配你实际绘制的内容
width="100%" + height="auto" 是响应式最稳组合
固定像素宽高（如 width="48" height="48"）看似简单，但一旦父容器尺寸变化、DPR 变化或字体缩放，就容易失真。用百分比 + auto 高度，让浏览器自动按 viewBox 的宽高比推算高度，避免拉伸变形。
- 必须显式写
height="auto"，不能省略或写成height=""，否则部分浏览器回退到默认高度 -
width可用"100%"、"fit-content"或"2em"，但不要混用单位（如width="50%" height="24px"） - 当父容器本身无宽高约束（如 flex 项未设
min-width），需加 CSSaspect-ratio: 1/1或min-height: 1em防塌陷
为什么 viewBox 宽高比必须和 width/height 一致？
SVG 渲染本质是把 viewBox 定义的坐标系“塞进”由 width 和 height 划定的矩形框里。只要两者宽高比不等，浏览器就会按 preserveAspectRatio="xMidYMid meet" 规则留白或裁剪——你看到的是图标偏左、文字糊成一团、描边粗细突变。
立即学习“前端免费学习笔记（深入）”；
-
viewBox="0 0 100 50"（2:1）配width="200px" height="200px"（1:1）→ 图形纵向拉长 -
viewBox="0 0 24 24"配width="48" height="36"→ 横向压缩、右侧留白 - 正确做法：要么保持宽高比一致（
width="48" height="48"），要么用height="auto"让浏览器自动适配
内联 SVG 时，删掉 xmlns 和 XML 声明
HTML5 中 <svg> 是原生标签，不需要 xmlns="http://www.w3.org/2000/svg" 或 <?xml version="1.0" encoding="UTF-8"?>。这些在 XML 文档里必要，但在 HTML 中反而可能触发兼容性问题或解析异常。
- 保留
<svg>根标签及viewBox、width、height属性即可 - 删掉所有内联
fill、stroke，改用 CSS 控制，避免优先级冲突 -
<use href="#id">必须用href，xlink:href已废弃，Chrome 80+ 不再支持
真正麻烦的从来不是怎么写，而是忘记 viewBox 本身就是一个坐标系统声明——它决定了缩放起点、可见范围和数学精度。很多人调了半天 width，却没意识到问题出在 viewBox 的四个数字根本没对上图形的实际边界。
