必须用viewbox而非硬设width/height，因为viewbox定义逻辑坐标系实现无损缩放；缺失时浏览器按位图处理致模糊、变形，而viewbox="0 0 24 24"配合css控制尺寸才能确保等比缩放与颜色继承。
直接用 <svg></svg> 标签画图标，不是贴图、不靠字体、不发请求——关键在 viewBox 配对 CSS 控制，而不是硬写 width 和 height 像素值。
为什么 <svg></svg> 里写死 width="24" 会导致图标模糊或错位
浏览器会把 SVG 当作“固定尺寸的位图”来缩放，尤其在高清屏或响应式容器中：宽高设死 + 没 viewBox = 图形被拉伸、裁剪或边缘发虚。真正起作用的是 viewBox 定义的坐标系，它让内部图形按比例映射到任意显示区域。
-
viewBox="0 0 24 24"表示内部坐标从 (0,0) 到 (24,24)，是个逻辑网格，和屏幕像素无关 - CSS 控制显示尺寸：
style="width: 24px; height: 24px;"或width: 1em; height: 1em;，图形自动等比缩放到该区域 - 如果只设
width/height不设viewBox，<circle cx="12" cy="12" r="10"></circle>可能跑出画布外，因为没定义坐标原点范围
用 <path></path> 画自定义图标时 d 属性常见失效原因
d 是命令流，不是数学表达式，浏览器解析失败就静默跳过整条路径，页面看起来“图标没了”。最常踩的坑是空格、大小写、Z 后多写了坐标。
-
M（大写）后必须紧跟两个数字，比如M10 10；写成M 10,10或M10,10也合法，但混用空格/逗号易出错 -
z或Z表示闭合路径，后面不能跟任何数字，写了就中断渲染 - 贝塞尔曲线
C要接满六个数：C x1 y1 x2 y2 x y，少一个就降级为直线，甚至整段不显示 - 导出工具生成的
d常带 6 位小数（如M23.456789,12.987654），手动截成M23.46,12.99更稳，视觉无差别
如何让图标随文字颜色自动变色（currentColor）
不用 JS、不写死颜色值，靠 fill="currentColor" 继承父元素文本色，是最轻量的配色方案。
- 在
<svg></svg>内部所有图形上显式设fill="currentColor"，例如：<path d="M12 2l3.5 3.5L12 9 8.5 5.5 12 2z" fill="currentColor"></path> - 确保父容器有明确文字色：
<div style="color: #007bff"><svg>...</svg></div> - 避免在
<path></path>上写fill="#333"这类固定值，否则会覆盖currentColor - 如果用了
stroke（描边），同样设stroke="currentColor"，保持风格统一
调试 SVG 图标位置偏移的最快方法
新手最容易懵的是“明明设了 cx="12"，圆却不在中心”，根源在于没理解 SVG 坐标系默认左上角为原点，且 viewBox 没对齐容器。
- 临时给
<svg></svg>加style="border: 1px solid red;"，立刻看清画布边界和图形实际落点 - 检查
viewBox数值是否和图形最大范围匹配，比如画了个<circle cx="12" cy="12" r="10"></circle>，viewBox至少得是"0 0 24 24"，否则圆心会被截掉 - 不要依赖
x/y居中矩形，<rect x="0" y="0"></rect>就是从左上角开始画；想居中，要么算偏移，要么用transform="translate(50%, 50%)" - 图标嵌入按钮或链接时，加
vertical-align: middle;防止基线错位，比调margin更可靠
真正麻烦的不是画不准，而是没意识到 viewBox 和 currentColor 这两个机制的存在——它们才是让 SVG 图标既清晰又灵活的核心杠杆。其他都是细节微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
