必须用viewbox而非width/height，因为viewbox定义内部逻辑坐标系，是无损缩放的锚点；缺失时浏览器按位图处理致模糊、描边失真，而声明viewbox="0 0 24 24"后，所有尺寸控制均按比例拉伸坐标系，图形数学关系不变。
直接内联 <svg></svg> 并配好 viewBox，就能实现真正无损缩放的图标按钮——硬设 width 和 height 是最常见却最错的做法。
为什么必须用 viewBox 而不是只靠 width/height
viewBox 定义的是 SVG 内部逻辑坐标系，它才是缩放的“锚点”。没有它，浏览器只能当普通位图处理：放大后边缘发虚、描边粗细失真、高 DPR 屏幕下模糊。而一旦声明了 viewBox="0 0 24 24"，后续所有尺寸控制（比如 width="1.5em" 或 max-width: 48px）都只是按比例拉伸这个坐标系，图形本身数学关系不变。
常见错误现象：<svg width="24" height="24">...</svg> 在 Retina 屏上显示模糊；transform: scale(1.2) 后描边变粗、文字像素化。
- 永远优先写
viewBox，哪怕你暂时只用固定尺寸 -
width和height可设为1em、100%或干脆不写（由父容器撑开） - 禁用
transform: scale()缩放整个 SVG 元素——它会把矢量坐标系一并拉伸，破坏精度
如何让 SVG 图标按钮响应式且可交互
内联 SVG 的最大优势是能用 CSS 直接控制内部元素，比如 <path></path> 或 <circle></circle> 的 fill、stroke，甚至加 transition 做 hover 动画。
使用场景：图标按钮需支持暗色模式切换、悬停反馈、点击状态变化。
- 给关键子元素加
class，例如<path class="icon-fill" d="M12..."></path> - 用 CSS 控制颜色：
.icon-fill { fill: currentColor; }，这样按钮文字色变，图标自动同步 - hover 动画建议用
transform: translateZ(0)触发 GPU 合成，比scale()更稳，不干扰坐标系 - 避免对整个
<svg></svg>套transition，应作用在具体图形元素上
内联 SVG 与外部引用的取舍
图标按钮这类需要样式控制、状态反馈、DOM 操作的组件，必须内联。用 <img src="icon.svg"> 或 CSS background 引入，等于放弃所有动态能力——填色、动画、JS 查询/修改路径数据都做不到。
性能影响：单个图标内联几乎无负担；批量图标建议用 <symbol></symbol> + <use></use> 方案复用，避免重复代码。
- 内联示例：
<svg viewbox="0 0 24 24" class="btn-icon"><path d="M..."></path></svg> - 不要用
<object></object>或<iframe></iframe>嵌入 SVG，它们隔离 DOM，CSS 无法穿透 - 如果图标数量多且静态，再考虑构建 SVG sprite，但按钮类交互组件不适用
高 DPR 屏幕下的描边与文字细节问题
即使有了 viewBox，stroke-width 和 font-size 在高分屏上仍可能被渲染为非整像素，导致模糊。这不是 bug，是 subpixel 渲染的副作用。
解决思路不是“强行取整”，而是用设计层规避：
- 优先用
fill而非stroke实现轮廓效果（例如用两个同心<path></path>模拟描边） - 图标中避免小于 12px 的文字；必须用时，设
shape-rendering="crispEdges"强制像素对齐（仅限简单几何） - 测试时务必在真实 Retina 设备或 Chrome 的 Device Toolbar 开启 “Device Pixel Ratio: 2” 查看效果
最容易被忽略的是：viewBox 的数值精度。用 Sketch/Figma 导出 SVG 时，坐标常带小数（如 viewBox="0 0 24.123 24.456"），这会让浏览器缩放计算产生微小误差——手动修成整数，比如 viewBox="0 0 24 24"，能显著提升清晰度一致性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
