
Ask HN: Why don't we use SVG instead of HTML for web applications? - thomasqbrady
This has been on my mind for years, now—time to see if I&#x27;m the only one.<p>HTML is great for what it was intended for—Documents. Primarily to flow unpredictably long text, and it still does that quite well.<p>It&#x27;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.<p>This is not a deal-breaker, but feels like the first smell I noticed. HTML doesn&#x27;t even have a coordinate system. The one added by CSS leans hard in the direction of providing relative, &quot;top&#x2F;right&#x2F;bottom&#x2F;left&quot; measurements, rather than absolutely X&#x2F;Y coordinates (though you can get those by jumping through some hoops).<p>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&#x27;s absolutely nothing semantically wrong with nesting your component into a group element.<p>While the responsive features available to web developers today are incredible, it&#x27;s still hard to translate &quot;pixels&quot; into their many, context-specific definitions. If we&#x27;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.<p>I&#x27;m not proposing that SVG as it stands now is a better option.  Obviously we can&#x27;t switch until we build things like forms, buttons, options, and the like in SVG. I&#x27;m wondering what the potential for an SVG-powered Web would be.<p>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&#x2F;feel more like iOS&#x2F;Android development? Would we have things like HStacks (SwiftUI) and LinearLayouts (Android) instead of CSS&#x27;s flex?
2. If that vision is attractive, is it too late? Could we start now?
======
JMTQp8lwXL
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](https://developer.mozilla.org/en-
US/docs/Web/SVG/Element)

~~~
thomasqbrady
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...](https://developer.mozilla.org/en-
US/docs/Web/Accessibility/ARIA/ARIA_Techniques)).

------
grizzles
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.

~~~
thomasqbrady
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...](https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/canvas#Accessibility_concerns)) 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.

------
thomasqbrady
By the way, I found this yesterday:

[https://bl.ocks.org/rleddy](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.

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

~~~
thomasqbrady
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.

