This is sick but replacing html elements with svg is going to be a huge tangled mess and you will be playing catchup forever. Look at huge companies with teams of engineers constantly trying to make sure their browsers render all html elements to spec. You are going to need to do the same with svg or users will get frustrated.
Maybe figure out a subset or a specific functionality that html elements struggle with but svg excels at, or present this as an alternative to a traditional webpage (like a page specifically for interacting with animations or playing a game or something). As far as building websites using only svg instead of html elements, that is a crazy lift to attempt.
One of the things I like about SVG is that it's the same everywhere. You can look at our site on any major browser and it's exactly the same down to the pixel.
Sure there are some rough edges — this is a proof of concept.
Long term, I would like to create an editing program that combines the best of SVG and HTML, because there are obviously many places where HTML offers a lot more.
That will be a huge project that will require funding, so right now I'm seeing how far I can push SVG by itself.
For the common use-cases, SVGs do render consistently across browsers, but there are differences in feature support and rendering behavior outside of those.
refX/refY is one example of this. These attributes were added to the SVG spec in 2015 and didn’t have support in all major browsers until a few weeks ago.
Our plan is not to do responsive design — Svija is really meant for designers, and for any content that requires real design, there will need to be separate versions for mobile and desktop anyway.
Part of what's fun about Svija is that you can design content very rapidly, since the page is an exact reflection of the Illustrator file.
I suspect that introducing responsive aspects would break that experience. However, we will be producing a page editor at some point in the future and when that day arrives we'll be looking into how best to handle these issues.
Right now, with Illustrator as an editor, it's just not possible.
Svija works by sending the smallest configured page (the mobile version) for the first request then checking the browser. If it's a bigger window, then the page is reloaded and only the correct version is sent for any future requests.
I want to be clear that I am not saying that all sites should be built this way — Svija is an experiment to see if this makes sense.
Svija SVG's are embedded in HTML — it's necessary to get the page to resize correctly.
We would like to integrate HTML elements wherever possible to display text. This would enable us to preserve semantic content, make accessibility easier, and make text management easier.
The problem is that until we have funding to build our own page editor it's just not feasible. Svija is meant for designers, not coders.
But I was talking about embedding which is, I think much nicer.
The only difference between both cases I was able to find is that if SVG is loaded via src, it will be a separate `document`. If it's embedded, it's part of DOM tree of HTML document that is being viewed.
Derp.. I've been rendering svgs in JSX for so long, I forgot about the obvious things like <img>, <link>, even adding an svg in CSS with background-image
Maybe figure out a subset or a specific functionality that html elements struggle with but svg excels at, or present this as an alternative to a traditional webpage (like a page specifically for interacting with animations or playing a game or something). As far as building websites using only svg instead of html elements, that is a crazy lift to attempt.