SVG放大模糊的根本原因是缺失viewBox属性；必须设置viewBox定义逻辑坐标系，配合width/height实现真正响应式缩放，且需声明xmlns命名空间、谨慎书写path的d属性。
直接用 <svg> 标签内联写入 HTML 就能展示高质量矢量图，不需要任何库，也不依赖图片加载——只要写对结构、设好 viewBox，放大缩放永远清晰。
为什么 SVG 放大后模糊？缺了 viewBox
只写 width 和 height 不够，浏览器会把它当固定像素容器处理，等同于拉伸位图。真正控制“可缩放”的是 viewBox。
-
viewBox="0 0 100 100"定义逻辑坐标系：左上角 (0, 0)，宽高各 100 单位 - 实际显示尺寸由
width/height决定，浏览器自动按比例映射内容 - 响应式推荐写法：
width="100%" height="auto" viewBox="0 0 100 100" - 删掉
viewBox后，<circle cx="50" cy="50" r="20">可能完全不显示或严重偏移
<path> 的 d 属性写错一个字母就消失
<path> 是最灵活也最容易翻车的标签，d 里命令大小写敏感、空格不可省、Z 不自动校准起点终点。
-
M（大写）= 绝对移动到，m（小写）= 相对移动，混用时基准点不同，图形立刻偏移 -
L100 50是画线到 (100, 50)，l100 50是从当前点向右下各移 100/50 单位 -
Z只是连回路径起始点，不检查是否重合；d="M0 0 L100 0 L100 100 L0.001 100 Z"会多出一条细线 - 调试建议：初学全用大写命令；导出路径后用正则
/\s+Z\s*$/i清尾部空格再验证
内联 SVG 必须带 xmlns，否则部分环境不渲染
虽然 Chrome 等现代浏览器常容错，但 Safari 严格模式、某些 SSR 渲染或 XML 解析器下，缺失命名空间会导致整个 <svg> 不显示或样式失效。
- 正确写法：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> - 错误写法：
<svg xmlns="">（空命名空间）、<svg>（完全省略） - 如果从设计工具导出 SVG，注意清理已弃用属性如
xlink:href，改用href - 颜色推荐用
currentColor，方便继承父级文字色，比硬编码#333更易维护
最容易被忽略的是：SVG 不是“贴图”，它是 DOM 节点。这意味着你不能只靠视觉对齐坐标，得信 viewBox 定义的逻辑画布，以及每个 cx/x/points 在其中的真实位置——调不出来的时候，先打印出坐标系范围，再核对数值单位和小数精度。
