SVGNode.outerHTML与XMLSerializer().serializeToString(SVGNode)的区别是什么？

虽然在常规场景下两者输出看起来一致，但它们在适用范围、序列化规则等方面存在关键差异：

• 适用节点类型不同
  outerHTML是Element接口的属性，仅能作用于元素节点（比如<svg>、<circle>这类标签节点）。如果尝试在SVG的文本节点、注释节点等非元素节点上调用，会直接抛出错误。
  而XMLSerializer().serializeToString()支持所有DOM节点类型，包括文本、注释、处理指令等SVG文档中的合法节点，都能完成序列化。

• 命名空间处理逻辑有别
  当SVG嵌入在HTML文档中时，outerHTML会遵循HTML的解析规则，输出的标签通常不带显式的SVG命名空间前缀或声明（因为HTML默认识别SVG的命名空间）。
  XMLSerializer则严格遵循XML规范处理命名空间，无论是独立SVG文档还是HTML中的嵌入SVG，都会保留必要的命名空间信息，输出更符合XML标准的结构。

• 输出格式细节差异

  • 空标签处理：outerHTML会按照HTML规则输出，比如<rect>可能直接写成<rect>（省略自闭合斜杠）；而XMLSerializer会输出标准的XML自闭合格式<rect/>。
  • 属性引号：outerHTML在属性值不含特殊字符时，可能省略引号；XMLSerializer则会给所有属性值添加引号，严格符合XML语法要求。

• API定位与兼容性历史
  outerHTML最初是IE专属的HTML DOM特性，后续被标准化，对SVG元素的支持是后来逐步完善的。
  XMLSerializer是DOM Level 3定义的专门用于XML序列化的API，从设计之初就适配SVG这类XML应用，对SVG的支持更原生、更稳定。

内容的提问来源于stack exchange，提问作者Hanum