31

Using what I believe to be pretty standard embedded svg:

<!DOCTYPE html>
<html>
<body style="padding:50px">

  <svg width="100" height="100">
    <circle cx="50" cy="50" r="20" />
  </svg>

</body>
</html>

IE (11) gives me a warning "HTML1500: Tag cannot be self-closing. Use an explicit closing tag." (DevTools, Console tab).

It's true that if I change the <circle.. to:

<circle cx="50" cy="50" r="20"></circle>

the warning goes away, but that looks strange to me..

The IE devtools have occasionally found real unclosed-tag errors, so it would be sad to see it render un-useful from this kind of noise..

Is there any way of making IE happy without resorting to adding closing tags everywhere?

Update: Note that the question is about "Foreign elements", not "Void elements" (http://www.w3.org/html/wg/drafts/html/master/single-page.html#elements-2). <svg> is not self-closing (it's defined as belonging to the Container element category: http://www.w3.org/TR/SVG/struct.html#SVGElement).

<circle.. is defined as a Basic shape element (http://www.w3.org/TR/SVG/shapes.html#CircleElement), which means that it is self-closing. In reading 8.1.2 of the html5 spec:

Foreign elements whose start tag is marked as self-closing can't have any contents (since, again, as there's no end tag, no content can be put between the start tag and the end tag). Foreign elements whose start tag is not marked as self-closing can have text, character references, CDATA sections, other elements, and comments, but the text must not contain the character U+003C LESS-THAN SIGN (<) or an ambiguous ampersand.

it seems (to me) like it is saying that tags inside an <svg> element (i.e. foreign elements) are self-closing if the svg-spec says they are, and when defining start tags (8.1.2.1), #6 says that the / in <tagname ... /> is optional on e.g. <br/>, but not on <circle ../>:

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.

So I believe the document is conforming as-is. I'm unsure if the using a closing </circle> tag would be conforming.

thebjorn
  • 22,303
  • 7
  • 72
  • 116
  • http://tiffanybbrown.com/2011/03/23/html5-does-not-allow-self-closing-tags/ It is up to the type of the Tag – TiyebM Mar 09 '15 at 18:07
  • @TiyebBellal I've updated the question to clear up that confusion. – thebjorn Mar 09 '15 at 19:32
  • 1
    Related (and maybe a duplicate): https://stackoverflow.com/questions/24299969/closing-svg-paths-explicit-or-self-closing – Denilson Sá Maia Jun 29 '15 at 15:38
  • @DenilsonSá related, yes, but not a duplicate: the linked question asks "What is the correct way of closing a path?", while I'm pretty confident that I know what the correct syntax is and I'm asking about ways to silence the IE warnings. – thebjorn Jun 29 '15 at 15:53
  • @thebjorn Your question is more elaborate, specific, and informative, but the other question has answers that should prove satisfactory for your needs. – ivanreese Sep 18 '15 at 21:21
  • 2
    @ivanreese why do you think so? There are two answers, the accepted one says you can either close a path by writing `` or ``, the other answer, from June/2015, is very similar to my reasoning above. Great, now we've all concluded that `` is valid inside an svg section in a html5 document. Denilson even says "This warning in IE11 developer tools is wrong". So far, that's just the premise of my question: Is there any way to silence these warnings (since ie devtools is useful for finding real unclosed tags, without resorting to bastardizing the svg with closing tags)? – thebjorn Sep 19 '15 at 12:44
  • Ah — your question is about how to silence that specific warning message! I missed that detail. Sorry! I agree, your question is not a duplicate. – ivanreese Sep 20 '15 at 21:17
  • SVG is basicaly XML and obeys the common rules of XML syntax, in which the full tag form (``) and the short self-closing form (``) are considered equivalent for all tags without content. So `` is perfectly valid, though arguably redundant. However, probably it would be better just to ignore the IE console warning, since it’s clearly a bug in a discontinued browser and it doesn’t affect the rendering (AFAIK). – Ilya Streltsyn Jan 01 '20 at 00:07
  • @IlyaStreltsyn while your comment is (almost) correct, it also completely misses the point. Also, in a post, and answers, with heavy citations from both the html and svg standards "SVG is basicaly (sic) XML" just doesn't add any valuable insight as far as I can tell. Feel free to add an answer though, but please read the comments on the other answers first. – thebjorn Jan 04 '20 at 11:42
  • @thebjorn sorry for that. My remark was related exclusively to the last paragraph of the post. I just wanted to point that "self-closed/not self-closed" are not categories of the element, it's just a XML syntactic construct. It's the document author who marks the start tag of the foreign element as self-closed by putting the trailing slash in it (https://html.spec.whatwg.org/#syntax-start-tag). But SVG doesn't prohibit explicit end tags for any elements (instead of self-closing them) like HTML does for void elements. – Ilya Streltsyn Jan 04 '20 at 13:28
  • @IlyaStreltsyn the fundamental problem with your argument is that it's too simple to just say that svg is xml, especially when used in a html context, cf. https://www.w3.org/TR/SVG/intro.html#W3CCompatibility "However, when SVG content is included in HTML document, the HTML syntax applies and may not be compatible with XML." All that aside, however, this question is about silencing warnings about conforming syntax - and it doesn't sound like you're saying that a self-closing `` tag is non-conforming..? – thebjorn Jan 04 '20 at 19:06

2 Answers2

4

See this question: Are (non-void) self-closing tags valid in HTML5?

Basically, HTML5 doesn't really do self-closing tags. Instead it has void tags, like <br>. This also explains why <script> isn't self closing when you are using an external js file; <script> isn't a void element. The SVG you are writing is actually html, so it has to follow HTML5's rules, not XML's.

I think you should just add a closing tag so that you can get the benefits of more important warning/errors in the console. Alternatively if your page was XHTML, I believe you could use a self closing circle tag.

Community
  • 1
  • 1
Tom B.
  • 101
  • 5
  • 4
    ...again, this is not a question about void elements, but about foreign elements -- which according to 8.1.2 can be self-closing. Section 8.1.2.1, bullet #6 (again of the html5 spec) says that foreign elements (like svg) containing a `/>` ending, mark the tags as self-closing. I can't see any support for `` being allowed as a foreign element. If you can find support for that syntax in the spec then you should include it in your answer (otherwise "has to follow HTML5's rules" and "just add a closing tag" seem contradictory). ps: xhtml failed, no sane person uses/d it. – thebjorn Oct 24 '15 at 01:26
-2

A lot of svg-elements can arguably be self-closing. However, these same elements (including basic shapes) often support animation elements, like <animate>, or descriptive elements, like <desc> elements, as content. Since none of the svg-elements are actually void-elements, it is better to use explicit closing tags. It seems to me that IE expects them to be written as such during the initial parsing.

After the initial parsing, IE will not throw warnings for self-closing tags anymore. Neither for an AJAX-request or for inline parsing with javascript.

This will not make IE throw warnings:

// Through an AJAX-request:
var xhr = new XMLHttpRequest;
xhr.open('some-svg.svg');
xhr.responseType = 'document';
xhr.send();

// Inline parsing:
document.body.innerHTML += '<svg width="100" height="100">\
    <circle cx="50" cy="50" r="20" />\
</svg>';

So, for your question: I don't think you can make IE 'happy' without changing those tags. At least not during the initial parsing.

EDITS:

  • Removed incorrect segments of the answer (xmlns will indeed do nothing in HTML, as the OP stated).
  • Added a script which will not make IE throw warnings, even with self-closing tags.

NOTES:

  • I know the question is not about javascript, I've merely added this part to show that IE only throws errors during parsing.
  • The OP correctly stated that svg (and mathML) elements are defined as foreign elements, this holds true even for IE.
Kevin Drost
  • 303
  • 3
  • 6
  • 2
    Svg elements might not be specified, but foreign elements are specified (section 8.1.2 -- linked and quoted in the question) -- and they can be self-closing. Also, we're talking about the HTML syntax (section 8), not the xml syntax, so I'm not sure what you think the xmlns attribute ought to do in this context..? In any case, the question is about silencing IE warnings about legal syntax and this doesn't seem like an answer to that question... – thebjorn Feb 01 '18 at 21:47
  • @thebjorn, the spec you link to defines foreign elements like this: "Elements from the MathML namespace and the SVG namespace." Your SVG tag has no namespace, so maybe IE doesn't recognize it as a valid foreign element, and adding the `xmlns` will silence the warning? – mercator Feb 03 '18 at 19:47
  • @mercator it's an interesting idea even if it isn't true. It's easy to verify that it doesn't silence the warning, and if you read to the end of section 8.1.2 you'll find the note that says "The HTML syntax does not support namespace declarations, even in foreign elements." (http://w3c.github.io/html/single-page.html#ref-for-foreign-elements%E2%91%A1) – thebjorn Feb 03 '18 at 22:26
  • 1
    @thebjorn fair enough. I have no Windows machine to check. It wasn't clear to me whether you had. But pointing to the spec isn't necessarily useful when you've already established that IE violates it. I was only pointing to it to find possible explanations for IE's misbehavior. – mercator Feb 03 '18 at 22:52
  • 1
    @mercator thanks for the attempt (hmm.. that probably sounds sarcastic, but it is meant entirely sincerely :-) – thebjorn Feb 05 '18 at 13:05
  • You're absolutely right about the use of `xmlns`. I've revisited my answer. – Kevin Drost Feb 12 '18 at 12:56