why svg path.d is classfied as a property? Options

[lolothedragon]

Hi guys,
This line https://www.w3.org/TR/SVG2/paths.html#TheDProperty defined d as a property, but it is in fact an attribute, we can verify it by following code
<path id='p1' d='M0,0 L10,10'/>
p1.d == null
p1.getAttribute('d') == 'M0,0 L10,10'
how does this happen?

[Christian J]

I don't know. This section: https://www.w3.org/TR/SVG2/paths.html#PathElement lists a number of attributes, and then "d" as a Geometry property, so it seems intentional. FWIW, this whole page uses the term "properties" too: https://www.w3.org/TR/SVG2/propidx.html

[pandy]

Can't it be both? As far as JS is concerned it's a property. But when used in markup it needs to be an attribute.

[Christian J]

Someone wrote that in the DOM, HTML attributes are called properties. But I haven't found an official source for that yet.

I don't know much about SVG. Is it basically just normal HTML, or does it involve other mystical things as well?

[pandy]

Someone wrote that in the DOM, HTML attributes are called properties. But I haven't found an official source for that yet.

I don't know much about SVG. Is it basically just normal HTML, or does it involve other mystical things as well?

I was interested in SVG when it was new. That's loooong ago now. It isn't HTML, but a flavour of XML. So yes, it's markup.

I think it's logical. Two different languages. One markup language and a programming language. They don't use the same lingo. What's just a kind of declaration (an attribute) in a markup language can be picked up by JS/DOM that uses it as a property it can do things with.

The real problem, I think, is that they chose to describe SVG primarily from a DOM point of view, not a markup POV. It's sort of implied that you already get the markup part. It all gets mixed up which I think makes it harder to grasp. But I've always preferred step by step learning. For me it's easier to first learn the markup bit, the syntax and terminology, and then move on to JS/DOM. But I come from markup, not programming. YMMV.

Back in the day I bought a book on SVG. I never finished it (it's very thick!), but read the introductory chapters. It was more structured and didn't mix lingos as freely as the spec does but took it as I like it, step by step. I understood what I read and even managed to write a few simple SVG animations.

It should also be said that of course the spec isn't a tutorial. So maybe the best way to tackle it is to read tutorials first or in parallel to the spec.

[Christian J]

Now that I studied a little more (I still know nothing about this), it might primarily be about CSS properties:

"Elements in an SVG document can be styled using CSS. Most visual characteristics and some aspects of element geometry are controlled using CSS properties. For example, the fill property controls the paint used to fill the inside of a shape, and the width and height properties are used to control the size of a ‘rect’ element.

[...]

6.6. Presentation attributes

Some styling properties can be specified not only in style sheets and ‘style’ attributes, but also in presentation attributes. These are attributes whose name matches (or is similar to) a given CSS property and whose value is parsed as a value of that property."
https://www.w3.org/TR/SVG/styling.html

MDN mentions "d" as both an attribute and a property:

"Using d as a CSS property

d is a presentation attribute, and hence can be also be modified using CSS."
https://developer.mozilla.org/en-US/docs/We..._a_css_property

There are also separate lists of attributes and properties at W3C, so it may not just be about the "d" property:
https://www.w3.org/TR/SVG/propidx.html
https://www.w3.org/TR/SVG/attindex.html

as well as "Geometry properties":
https://www.w3.org/TR/SVG/geometry.html
...yet "d" is not listed on any of those three pages. Am I looking at different specs or SVG versions?

[pandy]

Yeah. CSS too. It's the same with HTML and CSS. In HTML a color is an attribut, in CSS a property.

...yet "d" is not listed on any of those three pages. Am I looking at different specs or SVG versions?

I don't know. Haven't looked at an SVG spec for more than 10 years.