outerHTML of an SVG element

Question

Why can not we get outerHTML of an svg element with element.outerHTML property?

Is this way is the best http://jsfiddle.net/33g8g/ for getting svg source code?

Dunant

Answer 1

It's not accessible via outerHTML because SVG is not HTML -- it's a separate XML specification.

That's why, for example, your svg node in that example has its own namespace defined (xmlns="http://www.w3.org/2000/svg).

Your example may be the most expedient for a one-off query, but it's actually possible to dig in using native attributes. It just takes a bit more work.

Let's use the linked sample node:

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <text x="0" y="15" fill="black">An SVG element.</text>
</svg> 

If you want to extract the namespace and version, use the attributes property.

var svgElement = $('svg')[0]; // using your example
console.log(svgElement.attributes.xmlns); // outputs "http://www.w3.org/2000/svg"
console.log(svgElement.attributes.version); // outputs "1.1"

If you want to extract the actual contents, iterate over the children. Similar to the above, a non-text node's attributes collection will contain the x/y values (etc).

Without using jQuery, using your example again:

for (var i = 0; i < svgElement.childNodes.length; i++) {
    var child = svgElement.childNodes[i];
    if (child.nodeType == 1) {
        console.log(child.attributes[0].name); // "x"
        console.log(child.attributes[0].value); // "0"
        console.log(child.attributes[1].name); // "y"
        console.log(child.attributes[1].value); // "15"
    }
}

Here's an updated Fiddle, a bit more elegantly demonstrating the possibilities: http://jsfiddle.net/33g8g/8/

Tripper

Answer 2

SVGElements don't have outerHTML property.

You can define like this in pure Javascript

Object.defineProperty(SVGElement.prototype, 'outerHTML', {
    get: function () {
        var $node, $temp;
        $temp = document.createElement('div');
        $node = this.cloneNode(true);
        $temp.appendChild($node);
        return $temp.innerHTML;
    },
    enumerable: false,
    configurable: true
});

Or a one line jQuery solution would be

$('<div>').append($(svgElement).clone()).html();

Reference: https://gist.github.com/jarek-foksa/2648095

Accelerometer

Thanks for sharing that – was having a heck of a time getting outerHTML to work in Safari! – Heffner

I would add if (!('outerHTML' in SVGElement.prototype)) { /** */ } around the polyfill – Palinode

Answer 3

This is an easier solution and it works great in FF, Chrome, IE. Honor goes to Philipp Wrann.

outerHtml is not working in IE

new XMLSerializer().serializeToString(document.querySelector('#b'))

Chukchi

This worked for me. In Angular 2+ I was able to use this on a SVGElement Example: const element: SVGElement = canvas.getPreview(); const svgString: string = w XMLSerializer().serializeToString(element); – Instrumentalism

Answer 4

2013 update: The innerHTML and outerHTML are going to be supported for svg elements too, per the DOM Parsing specification.

A patch for this has been landed in Blink/Chrome and will become available soon, see http://code.google.com/p/chromium/issues/detail?id=311080.

Aston

I can confirm this works perfect on the most recent versions of Chrome, Safari and Firefox. Alas, it doesn't work on Internet Explorer 11. – Coign

Answer 5

Using jQuery, you can easily create a temporary HTML wrapper around any element that doesn't support outerHTML :

function wrappedHtml(elt){
    var wrapped = elt.wrap("<wrap></wrap>").parent().html();
    elt.unwrap();
    return wrapped;
}

Yester