I was getting really frustrated with CSS and HTML (I was originally a print designer), so built a tool for building websites using only SVG content.
It's essentially a website builder that uses Adobe Illustrator for creating pages.
The results so far have been really promising:
- building websites is extremely rapid
- very little debugging or verification is needed
- it's easy to create beautiful content
Techniques that were trivially easy for me 30 years ago in print are still impossible in HTML. With SVG, I can just design the page without worrying about interlocking invisible boxes.
You can try it yourself — it's free, but you'll need to create an account for the hosting part.
The only tool I could find to create the SVG's was Adobe Illustrator, because it enables linked images and fonts, like regular HTML pages.
As far as I know, no other SVG editor except for Inkscape does this.
I can't be the only one that drags the browser to the side of the screen in order to put it in tablet, and then phone view, and then judges the results!
SVGs are powerful, and probably underused, especially now that browser support is nearly universal. What do you mean by “enables linked images and fonts”? I create SVGs as text, in Vim, as I do with HTML and CSS.
I revisited SVGs when redesigning a planetarium website (https://friendsoftheplanetarium.org/). I suppose I could have done all of it in CSS, but the code using SVG was simple and concise.
On the way I discovered a nasty bug in recent releases of the Blink engine (https://bugs.chromium.org/p/chromium/issues/detail?id=127442...). It should be fixed in the next release, but it makes me wonder if you are less likely to get correct rendering when using SVGs.
Almost all programs that can create SVG content convert images into inline code, and reduct text to glyphs.
This means that fonts can't be reused throughout the site, that text can't be read (either by screen readers or Google), and it can't be selected or copied.
It also means that images are much larger than necessary and can't be reused (making the site more resource intensive).
All of this adds up to "not being a real web page".
The only exceptions I know of are Illustrator and Inkscape.
So far, the rendering with Illustrator has been pretty much perfect. There were a few idiosyncrasies that I addressed in the server program.
I haven't experimented much with Inkscape because I'm on Mac and it doesn't seem to be used much in commercial contexts.
Illustrator is, but I don't think Inkscape is. I haven't been able to find any real information about Inkscape adoption rates, but I participate in several vector forums and Inkscape only ever comes up in terms of amateur illustration.
I would love to be wrong about this.
Figma and Adobe Xd are pretty popular, as is Affinity Designer. Microsoft Visio is popular in certain contexts, and InVision Studio is also popular.
Just an anecdatum, at UIUC's fab lab we taught Inkscape to all ages, it was really useful to import an image, trace bitmap to an SVG, and send the SVG to vinyl cutters, laser cutters, 3d printers... I think we were not the only fablab to do this, and hopefully it is popular in other educational circles.
Inkscape and gimp are the only tools I use for image editing. I'm a developer working in B2B manufacturing so the aesthetics of my work don't really matter.
I own Adobe Creative Suite but use Inkscape for illustrations embedded in web pages because the svg source is cleaner* and diff-able, meaning, the illustrations can be checked into GIT and convey sensible (minimal diff) history of changes. Haven’t checked in a few years to see if Illustrator cleaned up yet.
// Similar to the typical problem with HTML generators, they’d write nasty code, so most were write only rather than write/read. To be fair, I haven’t checked Illustrator output in half a decade, so it could be fine now.
/// Definitely trying your tool, thank you for sharing!
For the US market, have you considered accessibility yet? It’s one of the struggles that one has to deal with in a website builder market. As of now, the structure of the website being produced has both SEO (creating search engine and related revenue concerns) and accessibility issues. The later are severe enough to end up in an accessibility lawsuit in the US, if one is running a business worth any non-trivial amount of money (i.e. you wouldn’t want it shutdown upon lawsuit).
The source of the website shows a nice simple accessibility section, with the content rendered in nice vanilla P and Hx and such tags, with the visual rendering a single easily-ignored SVG below. Presuming those two remain synced, it's probably more accessible than most.
If you would take one suggestion, it's probably a good idea to make saving and pushing different actions. A complex project might go through several revisions before it's ready to be uploaded, might need approvals, might need a lot of things. You wouldn't want to leave your work unsaved until you're ready to put it online.
There's no obligation to push — you can easily synchronize the site when everything's ready.
Also, any modifications take effect after 24 hours, or you can just unpublish a page temporarily — there are several options that permit working without going live.
One of the issues you run into with SVG is performance, particularly if you need any kind of styling of the SVG. As the tool scales you have to put in some effort into optimizing the generated SVG to help.
If you aren't handrolling or compiling the SVG yourself you also need to look out for whatever your tool is doing. Illustrator and Sketch in particular do some wonky nonsense with filters to support things like inner/drop shadows, and you may want to A/B the SVG in different browsers to make sure they look the same. It's been a few years since I had to do this, but in my experience you really had to restrict what features of the SVG editor your designers used.
There's one real bug where Illustrator doesn't handle opacity masks correctly, but otherwise it's been really reliable about displaying correctly.
However, in the past 10 years or so, a bunch of Photoshop functionality has been added in to Illustrator, and none of it is compatible with SVG.
So, there are various and warnings and workarounds for drop shadows etc.
But, Illustrator has good support for SVG effects, so drop shadows in particular are pretty simple to use.
The long term goal is to create really clean SVG/HTML hybrid code with a new program, but I still have to write it!
---
There's also an issue where SVG's are slower to animate because they don't use hardware acceleration, but my understanding is that this is coming soon.
The discrepancies I'm talking about is not between Illustrator and your browser, but between different browsers/renderers. Filters in particular are problematic.
You have to be careful about what you mean by "SVG effects" since the spec is quite large and has many ways of doing things, and different software may not agree with how they work. I don't think any renderer passes the entire standard test suite.
> wonky nonsense with filters to support things like inner/drop shadows
How else would you implement that with SVG? And in my experience filters have been very well supported for the past years. They are part of the SVG conformance tests anyway, so any mismatch is also a broken SVG implementation.
It's very responsive, like literally shrinking the contents to fit the width. Like when iPhone was first introduced and you open websites using its browser.
That’s the exact opposite of responsive, as originally coined and commonly used. Even when just responding to screen size, reflowing content so it’s legible and usable on the device is a reasonable low bar.
It could work with Inkscape. I'm trying to get some funding to hire a couple of devs, and PC support and Inkscape support are very high on the list of priorities.
I have had a lot of difficulty finding out how widely Inkscape is actually used. I look in the user forums etc., but apart from hobbyists, I don't hear about people using it for business.
If you have any info, links etc., I'd greatly appreciate it.
I don't unfortunately. I used to use Illustrator at work but these days I only create SVG for personal projects. I have recommended Inkscape to college students learning design to avoid the cost of AI, but that's about it.
Every time you add a tool that can be used to edit SVG, you add addressable market to your product. It's not about Inkscape, it's about SVG. Letting people use the editor of their choice just makes the product more useful. Also, inkscape is free, so you don't have $600/year in subscription fees to someone else as a barrier to adoption.
I have used Inkscape extensively in several professional projects - in fact I designed an entire custom icon set consisting of hundreds of SVG images. The Inkscape executable even supports command line arguments that invoke various functions so it can be used for batch processing and in scripts (I wrote a Perl script to automate several tasks involving my icon set).
Affinity Designer would be great, and we would LOVE to use it.
But, the last time I checked, it can only create SVG content with images converted into inline code, and text reduced to glyphs.
This means that fonts can't be reused throughout the site, that text can't be read (either by screen readers or Google), and it can't be selected or copied.
All of this adds up to "not being a real web page".
If I'm wrong about any of this, of if Affinity Designer has been updated to enable linked fonts and images, that would make my day.
I love Illustrator but it's certainly a bit of an albatross around my neck ;-)
> Techniques that were trivially easy for me 30 years ago in print are still impossible in HTML.
Out of curiosity, what techniques are impossible in HTML? I ask this because I too am working on a website builder, and wonder what might be too complicated or impossible for people to implement.
Any kind of freeform curve, rotation, or continuous form across the entire page is extremely difficult, as is content that is staggered, diagonal or overlapped is difficult.
The main thing that makes HTML difficult is that everything is interlocking — you can't just drag the H1 headline down 20px and over 100px, because there's already something there, or there's nothing to hold the H1 in place.
I would love to know more about your project if you'd like to share. After today, I recommend posting to HN.
Hmm I have seen many pages that look a lot like that page does (on mobile at least). I don't see anything that is impossible - I'd be fairly confident that I could do a pixel-perfect replica in HTML and CSS without too much fuss.
FWIW CSS is quite powerful these days - rotations, translations, overlapping etc are all trivial. You can absolutely position elements down to the pixel if you want.
People tend not to do these things any more though as they make for an annoying and potentially illegal website (accessibility laws), plus maintaing it is a pain in the arse as you lose all the reflow benefits of HTML that is screen size and shape agnostic
Congratulations for launching a new idea! There are plenty of kinks to be ironed out but it looks promising.
A couple of problems on my end (Firefox on Android, low-end device): selecting text is very wonky, noticeable stutter when scrolling, first load of the page had really small text (on a refresh it showed me a proper mobile version).
If I may ask, what's the biggest motivation? The easy of use of authoring through Illustrator or having a more distinct graphic design? (the curves, funny text wrapping, et cetera)
Edit: also an issue in Firefox on Windows 10: page width is larger than the visible screen.
I was surprised it looks very good on mobile too. Will have a look later.
It also reminds me of flash, which had a similar selling point. Back in the day (early 2000's?) there was a trend building entire websites in flash only (requiring a browser plugin to be accessable). But svg is supported by any modern browser.
I stand by my opinion that flash had a positive impact on the world. Sure, lots of shit abounded during those days but a ton of fun games came out of that environment.
Except that there isn't a slow plugin that needs to be re-downloaded and browser re-started every time you use it, which were the worst bits of Flash as far as I was concerned.
I would love an SVG editor browser plug-in that also contains authentication. When you are on a page you're authorized to edit, a browser button shows that you can modify the page.
It then works with a protocol, with implementation examples in different languages, to create/remove/hot update SVG files on any subscribed servers. The authentication can further allow viewing of content on those servers as well.
Any small Linode server could be your own private Google Drive for web-enabled Word and PowerPoint documents.
I uses the responsive design mode in my browser. I guess you can serve multiple layouts by screen size detection initially, but people can rotate their phones in real life.
I tried the demo site, this could use some work, just about as responsive to platform changes as as an image map. Without some sort of system that allows you to automatically or pseudo-automatically generate mobile versions or versions for different aspect ratios, you'll have people complaining about your site not working on their 5x4 monitor or old phone because a design team wasn't well-equipped enough to cover the multitudes of different screen sizes and ratios.
It's definitely in the long term plans, but honestly in the five years I've been working on this, not one person has ever complained about that type of issue.
And, the website looks amazing in fullscreen mode on a big monitor, way better than other sites I've seen (within my design limits).
Being a noxious frontend dev, the first thing I tested was whether you supported responsive. What I found was that you load a different site based on the viewport size (rather than dynamically changing on resize) which I think is a perfectly serviceable approach to this. Cool project!
I was getting really frustrated with Xcode (I was originally a front-end developer) so built a tool for building apps using only JavaScript, HTML, and CSS. It's called Electron.
Joking aside, if enough work is put into it, SVG might be a solution one day to build a website. But right now it causes more problems than it solves.
Yeah auto-music is bad. Sound effects are hard to do too, although when done well they can work (at least for me). Example of a site with sound effects that isn't overwhelming: https://www.joshwcomeau.com/
Fixed, thanks for mentioning that. I was experimenting with Youtube embeds and since the autoplaying didn't work on my browser, I forgot to take it out.
This is how you enable creative web design. Sure, you shouldn't necessarily run your business on something like this (for a multitude of reasons), but for personal websites and prototypes this is great.
When Flash plugins were on the way out everyone always repeated how this would open the door for equally powerful HTML5 tooling. But while HTML5 has gained all the technical capabilities of Flash, nobody has managed to make an authoring tool as good as Adobe Flash. With the loss of Flash we mostly lost the creative websites by people who can't code but are great at visual design. This comes close to enabling that again.
I loved Flash, and I think that SVG, if I can create proper tools, has the potential to be as good and maybe to avoid some of the drawbacks.
In fact, I wrote Svija because I took a sabbatical from web design. When I came back, Flash was gone and I just couldn't stomach the idea of twenty years of HTML and CSS. So, SVG.
It's not like they were completely unusable, it's just showing text in an annoying way.
On the plus side, it's a testament to how nearly anyone could build a website. I'm sure many many people got their feet wet in web dev making simple sites for local businesses because the bar was so low.
Making an html version of most of the stuff i'm talking about would have been much easier than the flash version. when the only interactivity is changing pages.
First of all, neat concept. Small point, on desktop I have a horizontal scroll bar for what appears to be intended as a full width site, which is always a bit of a pet peeve.
I understand it's a technology demonstration, I'm struggling to decouple the clash with my aesthetic sense from the technology/framework. There are so many new UI elements (stuff floating, expanding, appearing on hover) that it really puts me off. E.g. on the navigation group that floats on the right, I guess theoretically it's cool that if you hover over "imagine" it offers a small "expand" button and then there's a neat animation as it drops down. All that feels out of place on a website though, as far as I'm used to them.
Can you expand on who you've found resonates with the tool? Is it mostly people who want a print poster on the internet, or similar image-first, single-page users?
So far it's been mainly small businesses who just want to put up a cheap website quickly.
I can turn a PDF flyer into a website in a couple of hours, and that's been really popular.
It's so fast to put up a site that it would be good for events, like album release parties, etc.
I'm hoping to find a company that would really like to explore the potential — with a good team we could do some amazing stuff.
The long term goal is to make a tool to replace Illustrator and just build regular websites using hybrid SVG/HTML pages (SVG as much as possible, HTML for text/search/accessibility reasons).
Very neat - I love the idea of building tooling for a very specific workflow. Must be satisfying to show people and have them go "what? That's it?!"
> The long term goal is to make a tool to replace Illustrator
As in your ambition is to have the original content creation happen in the tool you make, take Illustrator out of the process entirely? That's ambitious! (or it seems like it, with little actual knowledge of what functionality people use within Illustrator to produce content like this).
Fixed. That was a mistake — I had been experimenting with YT embeds, and I accidentally left the autoplay in (it was broken in my own browser so I didn't notice).
Perhaps parent was referring to flash sites from 20 years ago? Personally I found them to be pretty unique and creative. Obviously there were problems with security and cross platform limitations, but awesome none the less.
This may sound neat, but is the most stupid idea I've seen in a long time. As if Node.js wasn't bad enough.
Not only does this break standards we have used decades getting in place, but anyone old enough to remember the last time WYSIWYG webpage editors was all the rage, know how that ended (e.g. https://www.arngren.net/)
The page adapts to the screen. It means making different versions for different types of screens.
But, the development process is so abbreviated that it takes way less time to make a mobile & desktop version than it would take to make the equivalent responsive version.
Also many (most?) serious sites already develop separately for different platforms.
So far, in 5 years I've been working on this, I've not had a single comment from a non-developer about the responsiveness being inappropriate.
Can I chime in as a regular user, even though I'm a developer?
I looked at the website on my big 1440p monitor. It looked cool.
I resized the window to a still reasonable size (1280-ish width). Now some of the text is waay too small for me to read. 1366x768 is a still pretty common laptop resolution..!
I can't zoom in the text like on a regular page, it just makes the whole thing bigger, like an image.
I also can't use my favourite a11y tool waspline reader [1] because the HTML is hidden :-( but... I'm not a blind person who uses a screen reader. I'm an ADHD'er with visual snow. I can't change the fonts to ones which are a little more readable for me - and the font rendering in SVG images on Firefox on my linux computer isn't the best.
[1] https://addons.mozilla.org/en-GB/firefox/addon/waspline-read...
^ tbh, considering a lot of stuff I read is in PDF form I am thinking about doing an equivalent of this that does OCR on the viewport and applies a shader so it works on anything, and it only really applies to long blocks of text, which aren't a feature of the kinds of things you're targeting (flyers, product landing pages etc) but I wanted to highlight some of the less obvious accessibility stuff that's around.
I get it, pretty much everything posted to HN gets the "I don't like the design of this site for technical reasons" treatment (especially when it's an article on someone's blog and nobody was asking lol), but I do wanna highlight the not-so-obvious accessibility stuff.
Lots of folk will get by without complaining, because they're kinda used to tech and design being a bit difficult, and they aren't aware how we can improve things for them! I've seen my mum pull out a magnifying glass to read stuff on tablets before - she finds it easier than trying to get pinch-to-zoom to work - "I hate the panning from left to right all the time. It's not like reading a book. I'll forget what the start of the bloody sentence was!". Some people will attribute it to just "not being good with technology", which makes me sad for the users.
SVG is great but that "20 years of HTML and CSS" shouldn't be dismissed because it makes designs take longer.
I think it's really exciting that we have such a powerful layout engine in web browsers these days; the best BEST site designs I've seen take the best of vector art and responsive design. It is SO satisfying having a good vector landing page where the text still reflows, different things are visible when you resize the window etc.
I think your tool is great though, I just think you should run with all the "what about responsive design?" HN comments - you could have a really, really really good tool if you can support breakpoints, fluid layouts and reflowable text sections. The kind that people would pay $$$ for...
Plus, it's gotten a lot better since flex layouts became a thing in CSS!
I think Illustrator etc are missing a trick here too because they're designed more for print media, right?? What would be awesome is if there was a similar editor + format where responsiveness and fluidity were baked right into the authoring flow, like at the layer / object-group level, so you could say "those layers have to be pixel perfect, this one will show up at these sizes, this other one will stretch this amount, that one will scale relatively compared to that one" and hopefully end up with designs that you, the designer, are always satisfied with, which require little or no further work to adapt to other screen sizes, DPIs, devices, etc....
I really appreciate your comment, and I just want to reassure you that we take accessibility seriously.
In this case, we had to start somewhere, and we're excited to show it off. But it obviously needs work to be really accessible.
Svija might never be appropriate for content-oriented websites, which may be most of them. It was quite difficult to create the WTF page in Illustrator — it's not made for that kind of thing.
I am absolutely planning to build a tool, where, as you say "editor + format where responsiveness and fluidity were baked right into the authoring flow, like at the layer / object-group level".
As soon as we can get some funding it's off to the races!
Thanks again, you added an important point of view to the comments.
An idea who's time has come? SVG is an awesome concept, a superpower that has been basically demoted to create tiny vector icons.
The story of flash (the adobe / apple clash) is one of those classic tech industry stories where commercial interests randomly divert the flow, stall development for decades etc.
I've been having a lot of difficulty with messaging — the basic benefits are that it's super fast, and you can do stuff graphically that's just impossible otherwise — but I haven't found a good way to communicate that.
> Virtually all website builders include options to create responsive websites. However, in most cases, developers have used these options to create two versions: a desktop version and a mobile version. Various elements may also appear or be displaced depending on the exact screen dimensions.
> Svija is intended for websites where the content creator wishes to have complete control over the final page. Therefore, a separate, fixed version of each page is created for each version of the website. In most cases this means a desktop version and a mobile version.
> Although it may seem like a sacrifice to create separate versions for different platforms, [...]
This is mostly* all well and good, but should really be a front-and-centre caveat on the homepage for people considering this approach (I took this quote from https://svija.love/en/wtf ).
---
*However:
> [...] the reality is that most companies who care about providing a strong mobile experience already construct separate mobile websites
This is absolutely not even in the slightest bit true. It's true that most large companies (e.g. FAANG, etc.) do this, but saying "most companies" here is outrageous.
I have been building websites professionally since 1995, including ASP, Cold Fusion, PHP, Perl, lots of other stuff.
But, it's true that I don't have much recent experience outside of Wordpress, and I have not had the benefit of working in large teams to learn best practices.
I wonder if there's some way to make this approach responsive, even if just using breakpoints (vs serving a completely different site requiring a pageload). Doesn't seem like it, but I haven't thought about it much.
That is definitely the goal long-term, but I don't think it will be possible with Illustrator.
Right now this project is a proof of concept: see, by doing real design we can make nice sites, very quickly.
I'm trying to get funding to create a new set of tools based around this kind of workflow.
Re-introducing breakpoints and some level of content reflowing is certainly going to be a part of it (I believe I mentioned it in the WTF page somewhere).
I have built many many HTML sites, but not many in a team context, so it's true that I lack relevant experience.
In my own experience, what ends up happening is that there are lots of situations where there's double content — on desktop show this block, on mobile show this other block.
But that's not the same as a whole duplicate website.
Your site is laggy, zero accessibility, microscopic text unless your window is large enough, does not support anything you'd expect from a regular website. Just ship a PDF already.
The web is not paper, don't design for it as if it as.
> People have said that for literally everything we have on the web now
What I meant is that here the intent is to design something once and display it in the browser as if it was an image (or printed media), i.e. without filling the window properly.
This is 100% like displaying a PDF in a browser and it does not belong in one.
Your approach is incredibly out of line. This is a proof of concept designed by one person. It's an idea, and an interesting one. Why do you feel the need to be so negative?
If it was a proof of concept, fine, but it's not, the author intends to develop this further and is accepting signups. I do not want this web. Just publish PDFs if you want to design fixed media.
So much hate. Whether or not it has legs, it's an interesting proof of concept. Reminds me of the early days of internet where people weren't afraid to explore crazy ideas.
I really like that this allows people to finally break free from the box design and try something new. Of course there will be challenges like accessibility along the way but those can be solved.
I just happened to launch a similar product today on product hunt (https://moos.app) that also allows people to build pages from SVG files but I take a more hybrid approach and focus more on animation (and the render actually uses WEBGL for performance reasons).
Will we still have the same boxy design in 5 years or will we have a completely new experience?
163 comments
[ 2.9 ms ] story [ 262 ms ] threadIt's essentially a website builder that uses Adobe Illustrator for creating pages.
The results so far have been really promising: - building websites is extremely rapid - very little debugging or verification is needed - it's easy to create beautiful content
Techniques that were trivially easy for me 30 years ago in print are still impossible in HTML. With SVG, I can just design the page without worrying about interlocking invisible boxes.
You can try it yourself — it's free, but you'll need to create an account for the hosting part.
The only tool I could find to create the SVG's was Adobe Illustrator, because it enables linked images and fonts, like regular HTML pages.
As far as I know, no other SVG editor except for Inkscape does this.
For now it's Mac only.
What do the end results look like when used on devices with different screen sizes and resolutions?
Does a site laid out for a phone like gigantic on a desktop?
How does it react to different aspect ratios?
I revisited SVGs when redesigning a planetarium website (https://friendsoftheplanetarium.org/). I suppose I could have done all of it in CSS, but the code using SVG was simple and concise.
On the way I discovered a nasty bug in recent releases of the Blink engine (https://bugs.chromium.org/p/chromium/issues/detail?id=127442...). It should be fixed in the next release, but it makes me wonder if you are less likely to get correct rendering when using SVGs.
This means that fonts can't be reused throughout the site, that text can't be read (either by screen readers or Google), and it can't be selected or copied.
It also means that images are much larger than necessary and can't be reused (making the site more resource intensive).
All of this adds up to "not being a real web page".
The only exceptions I know of are Illustrator and Inkscape.
So far, the rendering with Illustrator has been pretty much perfect. There were a few idiosyncrasies that I addressed in the server program.
I haven't experimented much with Inkscape because I'm on Mac and it doesn't seem to be used much in commercial contexts.
Aren't those the two most common vector graphics programs?
I would love to be wrong about this.
Figma and Adobe Xd are pretty popular, as is Affinity Designer. Microsoft Visio is popular in certain contexts, and InVision Studio is also popular.
// Similar to the typical problem with HTML generators, they’d write nasty code, so most were write only rather than write/read. To be fair, I haven’t checked Illustrator output in half a decade, so it could be fine now.
/// Definitely trying your tool, thank you for sharing!
("People who hate abbreviationS")
There is a setting for each page for Google and Accessibility where one can include HTML text for those reasons.
It's a priority for me to write a script to create an accessible/searchable version automatically.
Long-term, the goal is to create a design program that creates hybrid SVG/HTML pages that are indexable and screen-readable by default.
Need funding.
good luck with the funding!
I'm planning to write a script to automatically convert the Illustrator text to HTML, based on font size and position on the page.
Also, any modifications take effect after 24 hours, or you can just unpublish a page temporarily — there are several options that permit working without going live.
If you aren't handrolling or compiling the SVG yourself you also need to look out for whatever your tool is doing. Illustrator and Sketch in particular do some wonky nonsense with filters to support things like inner/drop shadows, and you may want to A/B the SVG in different browsers to make sure they look the same. It's been a few years since I had to do this, but in my experience you really had to restrict what features of the SVG editor your designers used.
However, in the past 10 years or so, a bunch of Photoshop functionality has been added in to Illustrator, and none of it is compatible with SVG.
So, there are various and warnings and workarounds for drop shadows etc.
But, Illustrator has good support for SVG effects, so drop shadows in particular are pretty simple to use.
The long term goal is to create really clean SVG/HTML hybrid code with a new program, but I still have to write it!
---
There's also an issue where SVG's are slower to animate because they don't use hardware acceleration, but my understanding is that this is coming soon.
You have to be careful about what you mean by "SVG effects" since the spec is quite large and has many ways of doing things, and different software may not agree with how they work. I don't think any renderer passes the entire standard test suite.
How else would you implement that with SVG? And in my experience filters have been very well supported for the past years. They are part of the SVG conformance tests anyway, so any mismatch is also a broken SVG implementation.
I have had a lot of difficulty finding out how widely Inkscape is actually used. I look in the user forums etc., but apart from hobbyists, I don't hear about people using it for business.
If you have any info, links etc., I'd greatly appreciate it.
So yes it can absolutely be used for business!
If it's proven to be performant enough, I think it would work for 90% of sites out there (pages of information + pictures)
Theoretically you could even have a graphic designer build a site without much code knowledge instead of hiring a webdev.
They also have their own integrated web site builder as well.
But, the last time I checked, it can only create SVG content with images converted into inline code, and text reduced to glyphs.
This means that fonts can't be reused throughout the site, that text can't be read (either by screen readers or Google), and it can't be selected or copied.
All of this adds up to "not being a real web page".
If I'm wrong about any of this, of if Affinity Designer has been updated to enable linked fonts and images, that would make my day.
I love Illustrator but it's certainly a bit of an albatross around my neck ;-)
Out of curiosity, what techniques are impossible in HTML? I ask this because I too am working on a website builder, and wonder what might be too complicated or impossible for people to implement.
For example, https://svija.love/en/imagine would be almost impossible in HTML.
The main thing that makes HTML difficult is that everything is interlocking — you can't just drag the H1 headline down 20px and over 100px, because there's already something there, or there's nothing to hold the H1 in place.
I would love to know more about your project if you'd like to share. After today, I recommend posting to HN.
FWIW CSS is quite powerful these days - rotations, translations, overlapping etc are all trivial. You can absolutely position elements down to the pixel if you want.
People tend not to do these things any more though as they make for an annoying and potentially illegal website (accessibility laws), plus maintaing it is a pain in the arse as you lose all the reflow benefits of HTML that is screen size and shape agnostic
1. Fitting text to curves.
2. Wrapping text to curves.
That was pretty much the first thing I thought of when I started the project.
A couple of problems on my end (Firefox on Android, low-end device): selecting text is very wonky, noticeable stutter when scrolling, first load of the page had really small text (on a refresh it showed me a proper mobile version).
If I may ask, what's the biggest motivation? The easy of use of authoring through Illustrator or having a more distinct graphic design? (the curves, funny text wrapping, et cetera)
Edit: also an issue in Firefox on Windows 10: page width is larger than the visible screen.
It also reminds me of flash, which had a similar selling point. Back in the day (early 2000's?) there was a trend building entire websites in flash only (requiring a browser plugin to be accessable). But svg is supported by any modern browser.
D3 can do it but it's really geared toward data visualization rather than general UIs.
https://d3js.org/
One of the nice things about this project is that it's shown me to what extent the internet has become based on existing content.
HTML is such a pain in the ass for design that almost all projects are just recycled — variations on themes, existing controls etc.
SVG is much more open, and of course that might be abused, like Flash.
To be clear, I do understand that usability is key and that websites should function in a transparent and understandable manner.
Personally my principle is that the visitor should be empowered at all times.
It then works with a protocol, with implementation examples in different languages, to create/remove/hot update SVG files on any subscribed servers. The authentication can further allow viewing of content on those servers as well.
Any small Linode server could be your own private Google Drive for web-enabled Word and PowerPoint documents.
And, the website looks amazing in fullscreen mode on a big monitor, way better than other sites I've seen (within my design limits).
It's so fast to build pages that building separate versions is much faster than building a single responsive WP page (for example).
Most of the time, both versions (or more if needed) are in a single Illustator doc and it's quite simple to maintain both at once.
Joking aside, if enough work is put into it, SVG might be a solution one day to build a website. But right now it causes more problems than it solves.
Like others said, the site scales, but isn't responsive and thus becomes unusable once you resize a browser window to a smaller size.
When Flash plugins were on the way out everyone always repeated how this would open the door for equally powerful HTML5 tooling. But while HTML5 has gained all the technical capabilities of Flash, nobody has managed to make an authoring tool as good as Adobe Flash. With the loss of Flash we mostly lost the creative websites by people who can't code but are great at visual design. This comes close to enabling that again.
In fact, I wrote Svija because I took a sabbatical from web design. When I came back, Flash was gone and I just couldn't stomach the idea of twenty years of HTML and CSS. So, SVG.
Is it because we're shoving the SVG into the dom or something? Or using expensive SVG features?
I could list a bunch of links, but of course none of them work anymore.
Perhaps I could require some sort of SVG Licence to use Svija, or an oath to usability ;-)
On the plus side, it's a testament to how nearly anyone could build a website. I'm sure many many people got their feet wet in web dev making simple sites for local businesses because the bar was so low.
Making an html version of most of the stuff i'm talking about would have been much easier than the flash version. when the only interactivity is changing pages.
I understand it's a technology demonstration, I'm struggling to decouple the clash with my aesthetic sense from the technology/framework. There are so many new UI elements (stuff floating, expanding, appearing on hover) that it really puts me off. E.g. on the navigation group that floats on the right, I guess theoretically it's cool that if you hover over "imagine" it offers a small "expand" button and then there's a neat animation as it drops down. All that feels out of place on a website though, as far as I'm used to them.
Can you expand on who you've found resonates with the tool? Is it mostly people who want a print poster on the internet, or similar image-first, single-page users?
I can turn a PDF flyer into a website in a couple of hours, and that's been really popular.
It's so fast to put up a site that it would be good for events, like album release parties, etc.
I'm hoping to find a company that would really like to explore the potential — with a good team we could do some amazing stuff.
The long term goal is to make a tool to replace Illustrator and just build regular websites using hybrid SVG/HTML pages (SVG as much as possible, HTML for text/search/accessibility reasons).
> The long term goal is to make a tool to replace Illustrator
As in your ambition is to have the original content creation happen in the tool you make, take Illustrator out of the process entirely? That's ambitious! (or it seems like it, with little actual knowledge of what functionality people use within Illustrator to produce content like this).
I'm assuming it's closed source to respect your business, but do you keep any kind of blog or progress updates online?
Any chances of open sourcing in the future? :)
George Santayana
Not only does this break standards we have used decades getting in place, but anyone old enough to remember the last time WYSIWYG webpage editors was all the rage, know how that ended (e.g. https://www.arngren.net/)
Like Svija - not a real website.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ma...
very 1999 :)
TOTAL ISSUES 220 AUTOMATIC ISSUES 220 NEEDS REVIEW 160 GUIDED ISSUES 0 Critical 1 Serious 55 Moderate 2 Minor 2
But, the fact that I don't a perfect solution right off the bat is not a reason to stop exploring!
Also: ALL CAPS.
Yes, the report is output in all caps. Nothing wrong with your eyes!
Of course some bugs to work out, but for a new idea, damn.
What do you do with keyboard tabbing? Do you mean form fields? For that it works fine, unless I just made an HTML mistake.
But, the development process is so abbreviated that it takes way less time to make a mobile & desktop version than it would take to make the equivalent responsive version.
Also many (most?) serious sites already develop separately for different platforms.
So far, in 5 years I've been working on this, I've not had a single comment from a non-developer about the responsiveness being inappropriate.
Just because they don't complain about something specifically, it doesn't mean that they don't feel discomfort.
Those being said, it could be a viable solution for fixed screen kiosks.
I looked at the website on my big 1440p monitor. It looked cool.
I resized the window to a still reasonable size (1280-ish width). Now some of the text is waay too small for me to read. 1366x768 is a still pretty common laptop resolution..!
I can't zoom in the text like on a regular page, it just makes the whole thing bigger, like an image.
I also can't use my favourite a11y tool waspline reader [1] because the HTML is hidden :-( but... I'm not a blind person who uses a screen reader. I'm an ADHD'er with visual snow. I can't change the fonts to ones which are a little more readable for me - and the font rendering in SVG images on Firefox on my linux computer isn't the best.
[1] https://addons.mozilla.org/en-GB/firefox/addon/waspline-read... ^ tbh, considering a lot of stuff I read is in PDF form I am thinking about doing an equivalent of this that does OCR on the viewport and applies a shader so it works on anything, and it only really applies to long blocks of text, which aren't a feature of the kinds of things you're targeting (flyers, product landing pages etc) but I wanted to highlight some of the less obvious accessibility stuff that's around.
I get it, pretty much everything posted to HN gets the "I don't like the design of this site for technical reasons" treatment (especially when it's an article on someone's blog and nobody was asking lol), but I do wanna highlight the not-so-obvious accessibility stuff.
Lots of folk will get by without complaining, because they're kinda used to tech and design being a bit difficult, and they aren't aware how we can improve things for them! I've seen my mum pull out a magnifying glass to read stuff on tablets before - she finds it easier than trying to get pinch-to-zoom to work - "I hate the panning from left to right all the time. It's not like reading a book. I'll forget what the start of the bloody sentence was!". Some people will attribute it to just "not being good with technology", which makes me sad for the users.
SVG is great but that "20 years of HTML and CSS" shouldn't be dismissed because it makes designs take longer.
I think it's really exciting that we have such a powerful layout engine in web browsers these days; the best BEST site designs I've seen take the best of vector art and responsive design. It is SO satisfying having a good vector landing page where the text still reflows, different things are visible when you resize the window etc.
I think your tool is great though, I just think you should run with all the "what about responsive design?" HN comments - you could have a really, really really good tool if you can support breakpoints, fluid layouts and reflowable text sections. The kind that people would pay $$$ for...
Plus, it's gotten a lot better since flex layouts became a thing in CSS!
I think Illustrator etc are missing a trick here too because they're designed more for print media, right?? What would be awesome is if there was a similar editor + format where responsiveness and fluidity were baked right into the authoring flow, like at the layer / object-group level, so you could say "those layers have to be pixel perfect, this one will show up at these sizes, this other one will stretch this amount, that one will scale relatively compared to that one" and hopefully end up with designs that you, the designer, are always satisfied with, which require little or no further work to adapt to other screen sizes, DPIs, devices, etc....
In this case, we had to start somewhere, and we're excited to show it off. But it obviously needs work to be really accessible.
Svija might never be appropriate for content-oriented websites, which may be most of them. It was quite difficult to create the WTF page in Illustrator — it's not made for that kind of thing.
I am absolutely planning to build a tool, where, as you say "editor + format where responsiveness and fluidity were baked right into the authoring flow, like at the layer / object-group level".
As soon as we can get some funding it's off to the races!
Thanks again, you added an important point of view to the comments.
The story of flash (the adobe / apple clash) is one of those classic tech industry stories where commercial interests randomly divert the flow, stall development for decades etc.
I've been having a lot of difficulty with messaging — the basic benefits are that it's super fast, and you can do stuff graphically that's just impossible otherwise — but I haven't found a good way to communicate that.
I won't put it in the next version of the site.
> Svija is intended for websites where the content creator wishes to have complete control over the final page. Therefore, a separate, fixed version of each page is created for each version of the website. In most cases this means a desktop version and a mobile version.
> Although it may seem like a sacrifice to create separate versions for different platforms, [...]
This is mostly* all well and good, but should really be a front-and-centre caveat on the homepage for people considering this approach (I took this quote from https://svija.love/en/wtf ).
---
*However:
> [...] the reality is that most companies who care about providing a strong mobile experience already construct separate mobile websites
This is absolutely not even in the slightest bit true. It's true that most large companies (e.g. FAANG, etc.) do this, but saying "most companies" here is outrageous.
But, it's true that I don't have much recent experience outside of Wordpress, and I have not had the benefit of working in large teams to learn best practices.
I wonder if there's some way to make this approach responsive, even if just using breakpoints (vs serving a completely different site requiring a pageload). Doesn't seem like it, but I haven't thought about it much.
Right now this project is a proof of concept: see, by doing real design we can make nice sites, very quickly.
I'm trying to get funding to create a new set of tools based around this kind of workflow.
Re-introducing breakpoints and some level of content reflowing is certainly going to be a part of it (I believe I mentioned it in the WTF page somewhere).
I have built many many HTML sites, but not many in a team context, so it's true that I lack relevant experience.
In my own experience, what ends up happening is that there are lots of situations where there's double content — on desktop show this block, on mobile show this other block.
But that's not the same as a whole duplicate website.
The web is not paper, don't design for it as if it as.
Oh, and this little page weighs 4.5MB
> The web is not paper, don't design for it as if it as.
People have said that for literally everything we have on the web now, starting with "the web is only for text and hyperlinks"
Hard disagree.
> People have said that for literally everything we have on the web now
What I meant is that here the intent is to design something once and display it in the browser as if it was an image (or printed media), i.e. without filling the window properly.
This is 100% like displaying a PDF in a browser and it does not belong in one.
Well, then I'm thankful people can still develop and test out radical ideas despite others not wanting that.
This is how all good tech develops, like PDFs. It just tends to be through the internet now.
If it was a proof of concept, fine, but it's not, the author intends to develop this further and is accepting signups. I do not want this web. Just publish PDFs if you want to design fixed media.
You may not know about them. Read them here:
https://news.ycombinator.com/showhn.html
Like this website? https://lab6.com/
(Hacker News discussion: https://news.ycombinator.com/item?id=27880905)
I just happened to launch a similar product today on product hunt (https://moos.app) that also allows people to build pages from SVG files but I take a more hybrid approach and focus more on animation (and the render actually uses WEBGL for performance reasons).
Will we still have the same boxy design in 5 years or will we have a completely new experience?
I really hope we get out of the boxy design in 5 years, and I hope it'll be thanks to Svija and Moos!