Can SVG markup in HTML5 omit self-closing tags?

Question

From the question Do I need a "/" at the end of an <img> or <br> tag, etc.? I learned that self-closing tags such as <br /> and <img /> are entirely optional in HTML5 and may simply be written as <br> and <img>.

But is that also true for SVG elements placed inline with HTML5? For example, can the <circle /> tag be written instead as <circle>?

<svg viewBox="0 0 1000 1000">
    <circle cx="500" cy="500" r="500" />
</svg>

If it is allowed, is it generally good or bad practice?

possible duplicate of Closing SVG paths, explicit or self closing? — m4n0
@ManojKumar I guess the answer for that question is an answer to this, but that question is asked more from a stance about a specific DOM validation system. — Keavon

Aruna Tebel Aruna Tebel · Accepted Answer · 2015-08-22T06:43:50

Below are some rules I found out in the W3 SVG and MathML elements in HTML documents documentation

SVG and MathML elements whose start tags have a single "/" character before the closing ">" character are said to be marked as self-closing.

SVG and MathML elements must either have a start tag and an end tag, or a start tag that is marked as self-closing, in which case they must not have an end tag.

SVG and MathML elements whose start tag is marked as self-closing, can’t have any contents.

The contents of an SVG or MathML element whose start tag is not marked as self-closing are any elements, character data, comments, and CDATA sections that it contains, with the restriction that any character data it contains must be normal character data.

I think the second point enforces svg elements to have a explicit closing tag or a self-closing tag.

Can SVG markup in HTML5 omit self-closing tags?

1 Answers