XMLSerializer producirá un marcado XML válido, mientras que outerHTML solo generará HTML.

SVG en HTML es mucho más laxo que cuando se analiza como un documento XML independiente. Por ejemplo, en HTML puede omitir xmlns="http://www.w3.org/2000/svg" en la raíz <svg> , como un documento independiente no puede. Esto también es cierto para cualquier atributo de espacio de nombres, HTML no tiene un concepto de espacio de nombres. XMLSerializer lo agregará nuevamente, mientras que outerHTML no lo hará. Otra diferencia menor es que en HTML, solo los elementos vacíos pueden omitir sus etiquetas finales. Al analizar, el analizador HTML también permitirá elementos dentro y el nodo <svg> , pero cuando obtenga el outerHTML , el serializador lo agregará nuevamente. El XMLSerializer no lo hará.

 const svgNode = document.querySelector("svg"); console.log("outerHTML", svgNode.outerHTML) console.log("XMLSerializer", new XMLSerializer().serializeToString(svgNode))

 <svg><rect width=30 height=30 /></svg>

Tenga en cuenta que estos puntos son importantes porque si desea cargar la cadena generada como una imagen SVG, solo funcionará la producida por XMLSerializer:

 const svgNode = document.querySelector("svg"); const outerImg = new Image(); outerImg.src = "data:image/svg+xml," + encodeURIComponent(svgNode.outerHTML); document.body.append("outerHTML:", outerImg, document.createElement("br")); const serializerImg = new Image(); serializerImg.src = "data:image/svg+xml," + encodeURIComponent( new XMLSerializer().serializeToString(svgNode)); document.body.append("XMLSerializer:", serializerImg, document.createElement("br"));

 img, svg { vertical-align: top }

 svg:<svg><rect width=30 height=30 /></svg><br>