Page 1 of 1

Self-closing PATH tags

Posted: Fri Apr 03, 2020 1:06 am
by TomHTML
Sometimes, just for kicks, I'll open a site in IE just to see what kind of errors it will throw. I recently did that on a page with an SVG element, and the error it threw had me going down rabbit holes to see what was truth and what was otherwise.

The code in question was this:

Code: Select all

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
	<title>menu</title>
	<desc>three stacked horizontal bars</desc>
	<path fill="none" d="M0 0h24v24H0z" />
	<path fill="#565656" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
</svg>
This is realized without any problem in current Chrome, Firefox, etc., and the Validator has no issue with it.

But IE complained of the PATH elements:
Tag cannot be self-closing. Use an explicit closing tag.
Was this right? I searched for documentation confirming this, but couldn't find any.

Then I opened the same HTML in Chrome, and in the DOM it quietly converted the self-closing PATH tags to explicitly closed PATH tags, like this:

Code: Select all

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
	<title>menu</title>
	<desc>three stacked horizontal bars</desc>
	<path fill="none" d="M0 0h24v24H0z"></path>
	<path fill="#565656" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
</svg>
The Validator doesn't have an issue with either version, but I'm curious if there's a standard here that IE has retained that has gotten lost in the shuffle by the other browsers. What do the specs say about explicitly closed vs. self closed PATH tags?

Re: Self-closing PATH tags

Posted: Fri Apr 03, 2020 5:01 pm
by Albert Wiersch
Hello,

One of my favorite references is the MDN reference. Here it is for SVG:
https://developer.mozilla.org/en-US/docs/Web/SVG

And the SVG element reference:
https://developer.mozilla.org/en-US/doc ... VG/Element

And the reference for the "path" element:
https://developer.mozilla.org/en-US/doc ... ement/path

And on that page they have an example with a self-closing "path" element.

If you go to the SVG spec itself (well, a draft of it anyway), there's also a self-closing "path" element in an example:
https://svgwg.org/svg2-draft/paths.html#PathElement

And, SVG is XML-based so self-closing tags should not be an issue.

It's possible that the "rules" might change, when SVG is embedded in HTML in an "obsolete" browser like IE... but using SVG embedded into an obsolete browser doesn't sound like something that should be done (but who uses obsolete browsers like IE nowadays for anything other than legacy reasons or to run legacy apps?).

Anyway, my guess is that IE is either wrong or going by an old/obsolete HTML standard that might not allow self-closing tags for SVG when embedded in HTML.

I did a search and found this (same question!):
https://stackoverflow.com/questions/242 ... lf-closing

Which references the HTML standard.
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.
So according to that, IE is wrong (not surprising).

I hope this helps. :D

Re: Self-closing PATH tags

Posted: Sat Apr 04, 2020 12:55 am
by TomHTML
When researching it, I first checked MDN and saw the examples you cited, and wouldn't have gone further. But then I saw what Chrome was doing under the hood, and it gave me pause. I wonder why Chrome would convert instances of <path /> to <path></path>? According to the quote at the end of your response, what Chrome is doing under the hood is wrong, correct? (Try it...open an example in Chrome and then look at the DOM in DevTools.)

Re: Self-closing PATH tags

Posted: Sat Apr 04, 2020 10:19 am
by Albert Wiersch
TomHTML wrote:
Sat Apr 04, 2020 12:55 am
When researching it, I first checked MDN and saw the examples you cited, and wouldn't have gone further. But then I saw what Chrome was doing under the hood, and it gave me pause. I wonder why Chrome would convert instances of <path /> to <path></path>? According to the quote at the end of your response, what Chrome is doing under the hood is wrong, correct? (Try it...open an example in Chrome and then look at the DOM in DevTools.)
I don't think Chrome is wrong.

Code: Select all

<path ... />
Is just a shortcut for

Code: Select all

<path ... ></path>
It's really the same thing.