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.
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.
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.
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!
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.
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.
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 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.
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 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.
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).
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.
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.
> 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
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!
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.
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 ;-)
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.
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.
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.
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.
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.
> 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.
> 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 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.
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.
• Good job on presenting the content sans JavaScript, even if JavaScript is required for the best results (responsive reflow).
• Page is rather heavy to load.
• Page load felt a bit sluggish on even a fast device; but on review I think the massive background JPEG at the top (4000×8047!) was a large part of this: you should have an approximation of it (background colour plus radial gradient) underneath it so that its potentially slow loading and rendering isn’t so obvious.
• Resizing the window has a habit of breaking things, seeming to attempt reflowing most of the time but normally making a mess of it. (Not factoring scrollbars in may be contributing to this.)
• I’m getting horizontal scroll bars, sometimes for substantial amounts and sometimes because you’ve measured the wrong thing that doesn’t take scrollbar width into account: to experience that on macOS so you can fix it, you can disable overlay scrollbars somewhere in the system settings.
• I found myself disappointed that the document is served as HTML rather than SVG, though it probably makes sense because of things like meta tags that I don’t imagine most tooling will understand how to consume within SVG.
• Where text flow is concerned, it may be worth switching back to HTML with <foreignObject>. It would probably allow code size reductions and performance improvements in reflow, and would improve accessibility, hopefully to the point where you could stop maintaining a separate HTML alternative section, instead weaving it throughout the SVG.
But all up, I like the concept. It’s good to see experiments in doing things differently. I myself am preparing to start publishing content handwritten and -drawn via my reMarkable tablet, and will be toying with making it reflowable at some point, though I suspect I’ll only ever reflow very sparingly. (If anyone else is interested in the concepts, take a look at http://www.styluslabs.com/ and https://developer.myscript.com/docs/concepts/responsive-layo....)
I need to optimize the images more. There is a background color etc., but the main image is much too heavy.
Many people have noted the horizontal scrollbar issue — it's from a problem with Windows years ago and I will make a note to take care of it.
It's not really possible to serve the document as a pure SVG, because the browser automatically resizes the content to fit vertically. The user would just see the whole page, shrunkent to fit in the middle of the screen.
There will be text flow in the future, but our immediate plans are to concentrate on using the system of exact coordinates with both HTML and SVG — it has the potential to radically simplify the code necessary and to allow for much easier design.
Once we have that down, we'll add in reflow.
I loved styluslabs.com - instant bookmark. I'll have to spend more time with it, but I'm curioushow it will work with search engines.
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.
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/
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?
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'll admit, I didn't want to like this at first. Building entire websites out of SVG sounds like a nightmare.
But I checked it out. On first load I got a blank page. Waited and waited, looked at the devTools,and just had nothing. I refreshed the page and it loaded properly. Ok, I get it, this is not ready for prime-time, so let's see what we've got.
So, now I'm looking at this and thinking....what new amazing capability has this provided that we couldn't do before. I was expecting amazing 3D svg animations or something. But this is just a very average template style website. Why would I want this to be made as an SVG. The "illustrator to website" doesn't appeal to me personally, and I'm not sure I know why this would be valuable.
It might be a good way to prototype lower at the concepting stage. However Adobe XD is pretty easy as well and has the bonus of being able to prototype basic apps as well.
Small businesses/enterprises that could give a damn about the web really.
For example: If I'm starting a restaurant, I can have someone design a cool-looking menu, and then basically host that as an SVG-based site and be done with it. I'll probably want to get my own domain, but I don't need to pay someone who knows how to wrestle with HTML to make it look like the printed menu.
We went down this road at one point. There are a number of issues surrounding accessibility with this. Plus performance isn't great. There were a bunch of other issues too that I don't remember off the top of my head.
We were going to make a webassembly UI framework that worked across devices natively as well as the web.
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.
It looks nice on my phone (although it's really slow to load, and laggy when scrolling). However, on my 1440p 32" monitor it's really bad. First of all everything is HUGE, and it seems like it just scales up/down with the size of my browser window. The content is not reorganized as I change the size of my browser window. If I scale my browser window up and down, everything just get larger or smaller, to the point where it's unreadable. Also, for some reason the page is just blank until I open DevTools, and if I "snap" the browser window in Windows 10, the page content doesn't scale to the right size.
How do you address font engine rendering discrepancies among OSes? IIUC those discrepancies are a good reason most SVG export features convert everything into paths.
Fun story-- awhile back some troglodytes living somewhere in the Linux font stack tripped some switch in their magical rendering engine. Whatever the change was, it caused even a mono-spaced font like DejaVu Sans Mono to have a significantly fatter width. So pre-trog Ubuntu perhaps would have X width for "Hello World This Should Fit Perfectly An SVG Rect" at size 10px, while post-trog Ubuntu would have X+7.
For my SVG-based UI, this meant I had to do a startup feature test for pre or post-trog Linux and scale the font accordingly on post-trog machines to make sure it fit properly into the box.
But honestly, I don't think you could do any kind of feature test like that with impunity. E.g., if the user created a page with no visible border lines drawn at the right edge of the text, they'd probably be surprised/irritated that the text is slightly scaled in a feeble attempt at cross-platform compatibility.
Anyway, all these problems go away when the fonts are converted to paths-- the user simply sees static output based on the rendering engine on the dev's machine.
Edit-- but of course if you convert to paths, you don't get text and text selection. Nevertheless, converting vector graphics output to SVG-with-text-content is not actually WYSIWYG, and that subtle truth will probably come back to bite your users.
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.
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).
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.
Accessibility seems to be an afterthought. No zoom possible.
Hopefully it can be enhanced to produce gracefully-degrading accessible output.
Or in the other direction, we could add a Wasm PostScript interpreter, and explode fonts by default so we get a sea of inscrutable ‘path’ elements. A WebGPU shader could tessellate it further. :^)
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.
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 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.
If you add a dark background inline style to the html root element, you get rid of the white background lurking from behind when pulling down. The white is blinding.
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).
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.
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.
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.
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.
For now it's Mac only.