Closing SVG tags, explicit or self closing?

31
votes

I was validating my code, and got the following error Tag cannot be self-closing. Use an explicit closing tag. in IE for my svg path because it's self closing.

<path d="m53.911,10.023c-1.46-.898-3.195-1.019-4.699-1.019h-3.439c" />

Now I know meta tags in HTML5 don't require the forward dash /, you just close them with >. Does the same thing apply to svg tags? Like so:

<path d="m53.911,10.023c-1.46-.898-3.195-1.019-4.699-1.019h-3.439c" >

Or… Using an explicit closing tag? Like so:

<path d="m53.911,10.023c-1.46-.898-3.195-1.019-4.699-1.019h-3.439c" > </path>

What is the correct way of closing a path?

2
htmlsvg
How did you validate your code? May be validating tool just don't know about SVG? - Alexey Ten
To be clear, /'s have no effect on void elements in HTML. So nothing is going to break if you include them, but really now... it's just silly to do so! Personally, I actively remove them when I see them. Save the precious bandwidth. :D - Rob

2 Answers

40
votes

The answer by Robert Longson is great, but links to a document that is marked as:

This document has been discontinued and is only made available for historical purposes.

I wanted to find some up-to-date specification on this behavior, and here is what I found:

A Self-closing tag is a special form of start tag with a slash immediately before the closing right angle bracket. These indicate that the element is to be closed immediately, and has no content. Where this syntax is permitted and used, the end tag must be omitted. In HTML, the use of this syntax is restricted to void elements and foreign elements. If it is used for other elements, it is treated as a start tag.

Source: W3C HTML5 Reference Editor's Draft

Start tags must have the following format:

…

  1. Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/). This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing.

Source: HTML Living Standard from WHATWG and HTML: The Living Standard - A technical specification for Web developers

Inline SVG and MathML support

…

The syntax <foo/> opens and immediately closes the foo element if it is a MathML or SVG element (i.e. not an HTML element).

Source: HTML5 Parser at Mozilla Developer Network

Conclusion: What Robert Longson wrote in his answer is still valid. This warning in IE11 developer tools is wrong. Using the self-closing syntax in HTML5 is valid (but only for void elements, such as <br/>; or foreign elements, which are those from MathML and SVG).

29
votes

Whatever validation you're using is working incorrectly.

SVG and MathML tags are self closing within HTML if they end with />. I.e. You can write a path as <path></path> or <path/> but you can't write it as <path>