HTML is great for what it was intended for—Documents. Primarily to flow unpredictably long text, and it still does that quite well.
It's not great for UI layout (or art direction), which is why we needed CSS in the first place, and why CSS only gets more sophisticated (or complex, depending on your perspective) over time.
This is not a deal-breaker, but feels like the first smell I noticed. HTML doesn't even have a coordinate system. The one added by CSS leans hard in the direction of providing relative, "top/right/bottom/left" measurements, rather than absolutely X/Y coordinates (though you can get those by jumping through some hoops).
The goals of creating a UI and writing semantic HTML are often at odds. It can be done (most of the time), but not without a lot of code-golf. Adding the admittedly superfluous, but sometimes required wrapper element often feels like a failure. In SVG, however, there's absolutely nothing semantically wrong with nesting your component into a group element.
While the responsive features available to web developers today are incredible, it's still hard to translate "pixels" into their many, context-specific definitions. If we'd been working with SVG all along, we would never have been worrying about half pixels, 2x versus 3x displays, etc. We would be thinking in vectors.
I'm not proposing that SVG as it stands now is a better option. Obviously we can't switch until we build things like forms, buttons, options, and the like in SVG. I'm wondering what the potential for an SVG-powered Web would be.
1. What would it look like now if we had chosen SVG over HTML 5, 10, 15 years ago? What would our tools look like now? Would web development look/feel more like iOS/Android development? Would we have things like HStacks (SwiftUI) and LinearLayouts (Android) instead of CSS's flex? 2. If that vision is attractive, is it too late? Could we start now?
My first thought looking at that SVG code is "we're better off with what we've got." But then I thought of it as looking inside the component code for a React/Ember/Angular/Vue/Svelte/etc. component and thought maybe it wasn't really that much more complex. And out of the box right now it would be possible to re-use at least the markup with SVG's use tag, which, in combination with HTML templates, could be pretty powerful.