报错一：Unexpected close tag (意外的闭合标签)

• “报错原因： 标签的嵌套顺序乱了（就像玩俄罗斯套娃，你把其中一个盒子提前盖上了，导致外面的大盒子没法正常关闭。）。

• 错误代码：

  <!-- 错误：外层 <text> 标签已关闭，导致 </tspan> 无法匹配 -->
  <text>你好<tspan>世界</text></tspan> 
  

• 动手修复： 记住一个原则：“后开的先关”。像剥洋葱一样，从最里层开始一层层向外关闭标签。

  <!-- 正确：内层 <tspan> 在外层 <text> 之前闭合，符合嵌套规则 -->
  <text>你好<tspan>世界</tspan></text> 
  

• 脑内公式： <a><b></b></a> (√ 正确) vs <a><b></a></b> (× 错误)

---

报错二：Invalid character in tag name (标签名里有特殊符号)

• “报错原因： 你把本该是“内容”的文字，不小心塞进了“标签”的名字里。标签名（比如 <rect>）是很“挑剔”的，只能用字母数字，绝不能有空格或者 <、> 这种特殊符号。

• 错误代码：

  <!-- AI 可能想表达 <S, P, O> 这段文本，但里面含有了`<`、`>` 这种特殊符号，所以程序错误地将其作为标签名 -->
  <tspan><S, P, O></tspan> 
  

• 动手修复： 把这些特殊字符“伪装”一下，让浏览器知道它们只是普通文本。这个“伪装”过程就叫实体转义。

  <!-- 正确：将特殊字符 < 和 > 转义为实体，使其作为文本内容而非标签结构 -->
  <tspan>&lt;S, P, O&gt;</tspan> 
  

• 核心思想： 标签是骨架 (<tspan>)，里面的内容是血肉 (<S, P, O>)，别让血肉长到骨头外面去了。

• 常用转义字符速查表 (记不住就截图！)：

  • < => < (less than)
  • > => > (greater than)
  • & => & (ampersand)
  • " => " (quote)
  • ' => ' (apostrophe)

---

报错三：Invalid character in entity name (转义字符写“残”了)

• “报错原因： 这个错误紧接着上一个。就是说，你进行“伪装”（转义）的时候，咒语念错了。正确的转义字符必须以 & 开头，以 ; 结尾，中间一个不多一个不少。

• 错误代码：

  <!-- 错误：实体名'ltS'无效，且缺少结尾的分号 ; -->
  <tspan>&ltS, P, O&gt</tspan> 
  

• 动手修复： 检查一下你的转义字符，确保它们是完整且正确的。

  <!-- 正确：&lt; 是一个完整的实体，其后的 S, P, O> 是普通文本 -->
  <tspan>&lt;S, P, O&gt;</tspan> 
  

• 常用转义字符速查表 ：

  • < => < (less than)
  • > => > (greater than)
  • & => & (ampersand)
  • " => " (quote)
  • ' => ' (apostrophe)

---

报错四：Unclosed Token (门开了没关，话说了半句)

• “报错原因： 这个错误非常常见！要么是某个标签（比如最外层的 <svg>）只有开头没有结尾，要么是某个属性的双引号只写了一半。

• 错误代码：

  <!-- 错误 1: 最外层的 <svg> 标签没有关闭 -->
  <svg width="100" height="100">
      <rect x="10" y="10" width="80" height="80" fill="red" />
  <!-- 此处应有 </svg> -->
  
  <!-- 错误 2: fill 属性的引号没有闭合，导致后续代码解析错误 -->
  <rect fill="blue ></rect> 
  

• 动手修复（老手技巧！）：

  1. 肉眼检查： 从里到外，仔细看看每个 <tag> 是不是都有一个对应的 </tag> (自闭合标签如 <rect /> 除外)，每个 attr="value" 的引号是不是都成双成对。
  2. 善用工具： 把代码复制到 VS Code、Sublime Text 或任何现代代码编辑器里！ 它们会自动用颜色高亮出没闭合的标签和引号，哪里有问题一目了然，比自己找快一百倍！

---

报错五：Attribute ... not allowed on element ... (属性“张冠李戴”了)

• “报错原因： 你给一个元素安排了它干不了的活儿。比如，你让一个矩形（<rect>）去走一条复杂的路径，但那是路径元素（<path>）的专属技能。

• 错误代码：

  <!-- 错误：<rect> 元素不支持 'd' 属性，该属性为 <path> 专用 -->
  <rect d="M10 10 H 90 V 90 H 10 L 10 10" />
  

• 动手修复： 了解每个 SVG 元素的核心属性。如果遇到不确定的，直接Google搜“SVG rect attributes”或“MDN circle”，MDN文档会告诉你标准答案。

  • 对于上面的例子，如果你想画矩形，应该这么写：

    <rect x="10" y="10" width="80" height="80" />
    

  • 快速参考：
    • <rect> (矩形): x, y, width, height
    • <circle> (圆形): cx, cy, r
    • <line> (直线): x1, y1, x2, y2
    • <path> (路径): d (这个最强大，也最复杂)

---

报错六：SVG转PNG图片里出现神秘黑块或转换失败 (黑匣子之谜)

• “报错原因： AI为了实现文本自动换行，可能会使用 <foreignObject> 标签在SVG里嵌入HTML代码（比如<p>或<div>）。这就像你请了一位只会说英语的厨师（HTML）来你的中餐馆（SVG）后厨帮忙，结果点菜系统（SVG转换工具）不认识他，要么直接罢工（转换失败），要么就给他贴个“身份不明”的黑牌子（渲染出黑块）。

• 错误代码：

  <!-- 错误：使用了<foreignObject>嵌入HTML，很多转换工具不认识它 -->
  <foreignObject x="30" y="70" width="690" height="150">
      <p xmlns="http://www.w3.org/1999/xhtml" style="line-height: 1.6;">
          这是一个需要自动换行的段落，但这种方法兼容性极差。
      </p>
  </foreignObject>
  

• 动手修复： 回归SVG的“母语”，用 <text> 和 <tspan> 标签手动实现换行。这才是所有平台都认识的标准做法。

  <!-- 正确：使用标准的<text>和<tspan>手动换行，兼容性100% -->
  <text x="30" y="85"> <!-- y是第一行的基线位置 -->
      <tspan x="30" dy="0">这是一个需要自动换行的段落，</tspan>
      <tspan x="30" dy="1.6em">现在用标准方法实现，</tspan> <!-- dy="1.6em" 实现换行 -->
      <tspan x="30" dy="1.6em">就再也不会出错了。</tspan>
  </text>
  

• 注意： 为了实现最大兼容性，在写SVG代码时尽量使用 <text> 配合多个 <tspan> 等传统SVG命令来处理多行文本，当然没准随着发展<foreignObject>的兼容性也月亮来越好了。

---

报错七：字体“失踪”导致样式错乱

• “报错原因： AI生成的代码里指定了一个你电脑上刚好有，但其他地方（比如服务器、别人的电脑）没有的“花哨字体”。这就像你用一种非常漂亮的自创字体写了一封信，但收信人没安装这个字体，在他眼里看到的只是一堆默认的宋体字，版式全乱了。

• 问题代码：

  /* CSS里指定了 'Fira Code', 'Segoe UI' 等特定字体 */
  .code-text { font-family: 'Fira Code', 'Courier New', monospace; }
  .title-text { font-family: 'Segoe UI', 'Inter', -apple-system, sans-serif; }
  
  <!-- 使用了这些样式的文本，在没有这些字体的设备上会显示异常 -->
  <text class="title-text">我的酷炫标题</text>
  

• 动手修复 (二选一)：

  1. 方案A (最稳妥): 文字转路径。 这是根治之法。把所有文字从“可编辑的字符”变成“纯粹的图形形状”。这样一来，它在任何设备上看起来都一模一样，因为不再依赖任何字体文件。

     • 怎么做： 使用 Adobe Illustrator、Inkscape (免费)、Figma 等专业工具打开SVG，选中所有文本，执行 “创建轮廓 (Create Outlines)” 或 “对象转换为路径 (Object to Path)”。
     • 优点： 100%保真，万无一失。
     • 缺点： 文字无法再编辑，文件体积会稍大。

  2. 方案B (需编辑): 使用通用字体栈。 如果你还想保留文字的可编辑性，就把 font-family 改成最通用的字体类别。

     /* 正确：使用通用字体族，让浏览器自己找一个合适的字体 */
     .code-text { font-family: monospace; } /* 等宽字体，用于代码 */
     .title-text { font-family: sans-serif; } /* 无衬线字体，用于标题 */
     

     这样能保证在所有设备上至少能用一种合适的默认字体来显示，不会太离谱。

• 决策指南：

  • 如果图片是 最终稿，不再修改文字 -> 选 方案A，一劳永逸。
  • 如果 需要保留文字编辑能力 -> 选 方案B，牺牲一点美观换取灵活性。