Use Lowercase for Custom SVG Attribute Names

This was driving me crazy.

I had added a custom attribute for an svg element, and the selector for it was not working. It made no sense. I could see the attribute on the elements in the generated html.

It turns out that you can't use mixed-case attribute names on custom svg elements. Well, you might hit weirdness unless you stick to lowercase. I don't know how I never ran into this before.

Note that there are some predefined attributes that are mixed-case (e.g., viewBox). This is lamented on the MozillaWiki's svg regrets page.

Popular Posts