SVG 动手区 · 索引¶

这里不教 SVG 语法。语法本身在 SVG 入门：读图与制作（本区第一篇）里讲透；本页只解决改图的另一种困境：图在手上、需求在脑子里，但不知道从哪一行下手改。这种困境的典型表现是——明明只是想改一个箭头方向，结果改完发现整块图错位、颜色在暗色模式下糊掉、或者图干脆白屏了。

先对号入座：我该改哪儿？¶

按你看到的症状点卡片，别按「我觉得应该改哪」走：

这是新手最大的认知落差。改 SVG 不像改 Word 文档——在 Word 里删掉一段，后面的内容会自动往上补；在 SVG 里删掉一个元素，其余元素一个都不会动，原地留下一个空洞。

反过来也一样：你想在中间插一个东西，SVG 不会自动给后面的内容让位，你得自己把后面的元素全部往后挪，或者先扩大画布。

推论：任何「插入 / 删除」类需求，实际工作量往往是「插入 / 删除 + 重新排版受影响的所有元素」。动手前先数一下会影响多少元素，比直接开改更省时间。

Word 自动补位 vs SVG 原地留洞

图：删掉一个元素后，Word 自动补位、SVG 原地留洞——这就是「坐标绝对」最直观的后果。

拿到的图如果是别人（或 AI）画的，第一件事不是改，是读。读的时候用一个无害的小改动验证你的理解对不对——比如把某个元素的颜色临时改成亮红，刷新看看变红的是不是你以为的那个。

这一步看着慢，实际是最快的：它能防止你在错误的理解上连续改十处，最后发现全错、得回滚。

SVG 是纯文本，Ctrl+Z 能救回来一部分，但跨多次编辑、中间还预览过的情况下很容易丢。动手前复制一份 xxx.svg.bak（或先 git commit 一次），是零成本的高收益习惯。

页面	解决什么
SVG 入门：读图与制作	动手区第一篇：读图四步（第 3 节）+ 完整语法字典（第 4–12 节）+ 制作实战（第 13 节）+ 常见坑与速查表（第 14–15 节）
改图的六种常见手术	六类标准化改法 + 「一改就跑偏」的坐标原理
把 AI 生成的 SVG 改成可维护的	接手 AI 图：清冗余 → 查语义 → 改可维护的完整流程
实战 · DW01 电路图改图复盘	一张电路图改了多轮的完整过程与教训
亮暗双主题与 MkDocs 嵌入	让图在亮/暗两种主题下都好看，且能正确放进站点
SVG 排错清单	症状反查表，出问题时的第一站
SVG 术语速查	高频属性 / 元素一词一解，配最小示例

AI 画的图有两个典型特点，值得单独提醒：

结构往往冗余——可能塞了没用到的 <defs>、重复定义的样式、或者用 <path> 画了本该用 <rect> 表达的东西。不影响显示，但会显著增加阅读成本。
语义可能错误——AI 对图形的物理/工程含义把握不稳。例如画 MOS 管时体二极管方向可能画反、画流程图时箭头指向可能不合逻辑。这类错误不会有任何报错提示，只有懂领域知识的人看才能发现。

所以拿到 AI 生成的图，检查语义正确性这一步不能省，而且它优先级高于调样式。具体案例见实战 · DW01 电路图改图复盘。