Ask HN: Why don't we use SVG instead of HTML for web applications? | Hacker News Reader

Ask HN: Why don't we use SVG instead of HTML for web applications?

8 pointsthomasqbrady7 comments

This has been on my mind for years, now—time to see if I'm the only one.

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?

HTML is good for semantically describing a webpage, which is good for accessibility. Tags like "section" impart semantic meaning. It doesn't seem to be a first-class feature of SVG:

https://developer.mozilla.org/en-US/docs/Web/SVG/Element

I ran out of characters in my OP, but this was something I wanted to mention.

1) I’m not saying we replace HTML altogether. So if you’re talking about writing an article, sure use HTML (and things like section tags).

2) You can make SVG and HTML equally accessible now with WAI-ARIA roles (https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...).

You seem wistful for a world that already exists. Google is doing this with the html5 canvas with flutter. A few other open source vector ui toolkits out there too like zebkit.org. If you want to create static webpages you could use paper.js or one of it's ilk to create a declarative type interface to a vector abstraction of your view. If you are looking for something without javascript, you could use SVG itself.

Not wistful, no. Curious.

I ignored canvas as an option because: 1) It has inherent accessibility problems (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ca...) 2) It's not and never really could be a markup language (by design), so a declarative format would rely on some library like Flutter and would never truly be a standard. I was wondering what the state of web standards would be if we had gone (or now went) that route.

By the way, I found this yesterday:

https://bl.ocks.org/rleddy

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.

Pretty interesting that I posted this (https://news.ycombinator.com/item?id=23512333) thread before being linked to yours! There's an SVG movement brewing it seems.

Hah, yep. I've been thinking it for years, actually, and have meant to submit something here.

Funny how many people respond "the performance isn't there" or "the tools aren't mature enough" as though THOSE things happen first and then you have a platform. They clearly weren't around for HTML's awkward years.

Reply on news.ycombinator.com