如何从HTML中提取SVG并解决保存时nbsp未定义的报错

报错原因 #

SVG属于标准XML格式，默认仅支持5种预定义实体：<、>、&、"、'。 是HTML专属的非换行空格实体，不在SVG的默认支持列表里，XML解析器无法识别，因此抛出该错误。

这类网页提取SVG的特殊性 #

从网页内嵌环境中提取的SVG通常存在以下不符合独立SVG规范的问题：

• 嵌入HTML时会复用HTML的实体定义，脱离HTML环境后原本的HTML实体失去定义
• 部分网站会动态修改SVG内容，插入仅HTML支持的字符或属性
• 直接从网页源码复制的SVG往往带有HTML转义字符，比如<被转义为<，无法直接被SVG解析器识别
• 当前你截取的代码为不完整的SVG片段，存在大量未闭合的标签，本身就不符合XML语法要求

正确保存的操作步骤 #

• 替换 实体：将代码中所有 替换为普通空格，如需保留非换行空格的特性，可替换为XML兼容的编码 
• 还原HTML转义字符：把所有转义后的符号还原为原始符号，比如<替换为<、>替换为>、"替换为"
• 补全完整代码：提取完整的SVG内容，确保所有标签成对闭合，不存在语法残缺
• 校验语法：保存为.svg后缀的文件后，可通过浏览器打开查看控制台报错，逐行修复残留的语法问题

内容的提问来源于stack exchange，提问作者János