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 openwebdocs/mdn-bcd-collector#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