Brings me to the title. Aside from wrapped text, this graphical layer could be pure SVG + CSS&JS. Why constrain designers to little CSS hack triangles and circles when there's an almost limitless vector graphics technology available instead?
I predict even with Houdini, CSS won't be rich enough to eliminate presentational markup for complex web applications. I know about role="presentation", but that seems to be an awkward compromise to avoid an explicit separation of concerns:
'Inspect element' any sophisticated web app and you'll see divs inside of divs inside of divs with class="color-blue border-2px border-gray background-number-seven". Slight exaggeration, but the separation of concerns doesn't exist.
I know the spirit of the web is "hackish" in that the standard quo is more of a gradual, messy evolution that gets there eventually rather than giant leaps which may not "stick the landing". However, to me it appears that some organization of _presentational_ aspects in particular is really needed. I know WebComponents, Houdini, and other "rationalize the platform" efforts' goals include this in part, but it doesn't seem like a nice graphical/animation layer which would sidestep DOM performance issues is in the cards.
This was off the top of my head, but I hope I got the gist across. I welcome any feedback.
It's absurdly complex, and there is little guarantee that the SVG spec is implemented completely and identically in different environments. I know of several native GUI SDKs that do not support a large portion of the spec.
Even something that should be easy like doing a wireframe or mockup in Sketch, exporting to SVG, then displaying that exported SVG in a browser on the same machine can display jarring errors in the rendered image.
And most of the cool shit in SVG - like embedded JS and the filters spec - are where those issues rear their heads.
What I'm saying is that SVG is as much a shitshow as HTML. It's just HTML with additional drawing semantics anyway.
But it is pretty cool:
https://upload.wikimedia.org/wikipedia/commons/6/6c/Morphing...
Could you expand on what you'd gain that isn't being done already? I'm not following what you mean here.
Web developers already use SVG for complex vector illustrations + some JS or CSS to animate the SVGs, coupled with CSS for simple shapes (like circles + rounded rectangles with shadows), and CSS for responsive layouts (SVG doesn't have anything similar to CSS in terms for responsive logic or layout logic as far as I know).
This works well enough, and for example you can replicate most UIs you'd see on different platforms without getting too crazy. I feel most UIs people want to build just really are composed of mostly rectangles, oval and circle, some layering and some shadows - CSS alone is decent at this.
DirectoryIndex index.svg index.html ...