Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Closing SVG tags, explicit or self closing?

Tags:

html

svg

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?

like image 475
Nikk Avatar asked Jun 19 '14 06:06

Nikk


People also ask

Is SVG a self closing tag?

No. It does not have an end tag. Example. <circle cx="50" cy="50" r="40" /> All SVG elements dont have an end tag.

Should I close self closing tags?

The fact is there is no need to close self closing tags by a slash /> at the end of the tag. Although many people use it but there is no meaning of slash at the end of the start tag even though you use it is ignored by the browsers.

Which tags are self closing?

↑ The full list of valid self-closing tags in HTML5 is: area, base, br, col, embed, hr, img, input, keygen, link, meta, param, source, track, and wbr.

Are div tags self closing?

No. HTML 4. x doesn't have any concept of self closing tags.


2 Answers

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).

like image 138
Denilson Sá Maia Avatar answered Sep 28 '22 02:09

Denilson Sá Maia


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>

like image 22
Robert Longson Avatar answered Sep 28 '22 00:09

Robert Longson