Reorganize SVG attributes in the style of HTML attributes

[ddbeck]

SVG element attributes are organized in a different way from HTML element attributes. Many SVG attributes are recorded as svg.attributes.<category>.<attribute> while others are recorded as svg.elements.<element>.<attribute>. Some are recorded in both places. This is confusing and leads to duplicate or mismatched data.

Instead, I propose we adopt the somewhat more consistent pattern of HTML element attributes for SVG attribute data: svg.elements.<attribute> for attributes which apply to a single element and svg.global_attributes.<attribute> for attributes which are not element-specific.

If we were to do this, we'd probably need to

• write up a guideline documenting the new approach
• go through all the existing SVG attributes and determine which are duplicates or need to be relocated
• update MDN pages with new identifiers

I don't think this is particularly high priority at the moment, but if we could agree on an approach in general, then we could leave it open as an effort that the community could pick up incrementally.

Inspired by #9402.

[foolip]

This has come up again in https://github.com/openwebdocs/mdn-bcd-collector/pull/1474.

https://svgwg.org/svg2-draft/attindex.html doesn't defined what global attributes are, but the attributes that are valid on the most elements are the ones in https://svgwg.org/svg2-draft/struct.html#CommonAttributes: id, tabindex, autofocus, lang, xml:space, class and style. A good starting point would be calling those global attributes and reorganize the rest.

[queengooborg]

This has been partially done in #22267, where the attributes were flattened into global_attributes. However, we still need to pick out the attributes that are not global, and move them to the corresponding elements.

[Elchi3]

In SVG there are also Presentation Attributes: https://svgwg.org/svg2-draft/styling.html#PresentationAttributes

The spec says that the following attributes apply to "Any element in the SVG namespace". I guess that makes them "global". They can also all be used as CSS properties.

alignment-baseline, baseline-shift, clip-path, clip-rule, color,color-interpolation, color-interpolation-filters, cursor,direction, display, dominant-baseline, fill-opacity, fill-rule,filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight,glyph-orientation-horizontal, glyph-orientation-vertical,image-rendering, letter-spacing, lighting-color, marker-end,marker-mid, marker-start, mask, mask-type, opacity,overflow, paint-order, pointer-events, shape-rendering,stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit,stroke-opacity, stroke-width, text-anchor, text-decoration,text-overflow, text-rendering, transform-origin, unicode-bidi,vector-effect, visibility, white-space, word-spacing, writing-mode

[caugner]

The spec says that the following attributes apply to "Any element in the SVG namespace".

I checked all of them and found that only mask-type is missing: https://github.com/mdn/browser-compat-data/issues/25608

[caugner]

I also checked all attributes currently recorded under svg.global_attributes (see https://github.com/mdn/browser-compat-data/issues/25609), and only found the following attributes that appear to be strictly speaking not global, but still apply to the majority of elements:

• requiredExtensions ("Most elements, but not all, may have conditional processing attributes [like requiredExtensions] specified on them.", which excludes never-rendered elements like style/script)
• clip (SVG 2 refers to CSS Masking 1: "applies to elements which establish a new viewport, pattern and mask elements")
• transform (SVG 2 points to CSS Transforms 1, which mentions "applies to: transformable elements")

@Elchi3 What should we do with these?

PS: Is there a reason why we have all svg global attributes in a single JSON file, rather than one file per attribute?