💾 Archived View for dioskouroi.xyz › thread › 29430368 captured on 2021-12-05 at 23:47:19. Gemini links have been rewritten to link to archived content
⬅️ Previous capture (2021-12-04)
-=-=-=-=-=-=-
________________________________________________________________________________
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 now it's Mac only.
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).
Accessibility is obviously super important. For now I add accessibility content manually.
I'm planning to write a script to automatically convert the Illustrator text to HTML, based on font size and position on the page.
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.
> The only exceptions I know of are Illustrator and Inkscape.
Aren't those the two most common vector graphics programs?
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.
Does this mean it could work with Inkscape? Since all Adobe products are now rentware I've moved to Inkscape and Affinity Designer for SVG these days.
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).
So yes it can absolutely be used for business!
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.
What about SEO, a11y, i18n?
For internationalization, it's built to handle different languages already.
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.
Okay sounds nice
good luck with the funding!
What about p27s?
("People who hate abbreviationS")
Chrome tried to auto-translate their example page which is in French, and failed completely.
For what it's worth, Xara (xara.com) offers SVG output. I wonder if it could work with your setup?
They also have their own integrated web site builder as well.
I'm definitely going to check it out — someone else also mentioned it.
> 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.
For example,
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.
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
For starters:
1. Fitting text to curves.
2. Wrapping text to curves.
This looks nice!
What do the end results look like when used on devices with different screen sizes and resolutions?
You can visit the site and resize your browser to get an idea. It just scales it down.
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!
Will a site laid out for a desktop browser even be readable on a phone?
Does a site laid out for a phone like gigantic on a desktop?
How does it react to different aspect ratios?
Try Ctrl-Shift-M in Firefox.
cmd-option-M on Mac, and if you reload the page it looks really nice ;-)
Absolutely ingenious. I love what you've done here
I agree, this could fix a massive amount of headaches depending on what kind of site you're building.
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.
Neat idea; I'm working on a project in a similar space but taking a very different approach. One question - why AI and not Figma?
Figma doesn't export to SVG with linked images and fonts, so it can't be used to create a web page.
That was pretty much the first thing I thought of when I started the project.
There is a typo at the top -- "Ilustrator" in "A WEBSITE BUILDER BASED ON ADOBE ILUSTRATOR".
Thank you (you'll have to imagine it in all caps).
Wow! this is amazing! How is responsiveness of the sites impacted by this?
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.
Can I use Affinity Designer with your tool?
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.
Macromedia Flash era was the best for authoring IMO. But I was just a hobbyist, didn't use it professionally.
This was a terrible era. Specifically because of sites that had no business using it making their whole site flash. Like restaurants.
There were definitely a lot of bad Flash sites, but there were some amazingly creative, artistic sites too.
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 ;-)
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.
Except when they were completely unusable.
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.
The problem with SVG is that it performs terribly especially when compared with Flash. This site is relatively small and it's super slow on an i9
I wonder why that's the case. Flash was all vectors and could run really well once it reached maturity.
Is it because we're shoving the SVG into the dom or something? Or using expensive SVG features?
_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
).
---
_[...] 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.
Yeah, all the sites I work on are responsive.
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 will change the text.
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.
To me it sounds like the author has nearly-zero experience in web development and thus prefers publishing websites straight out of Illustrator.
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.
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.
Oh, and this little page weighs 4.5MB
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?
> This is a proof of concept
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.
> Just ship a PDF already
Like this website?
(Hacker News discussion:
https://news.ycombinator.com/item?id=27880905
)
This site has very clear guidance on expected standards of behaviour when interacting with a _Show HN_ post.
You may not know about them. Read them here:
https://news.ycombinator.com/showhn.html
It's a proof of concept, but I think it has potential so it's worth exploring.
> 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"
> it's worth exploring
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.
> Hard disagree.
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.
The page looks cool, but I left immediately once the music started playing. There's a reason most websites stopped doing this.
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:
Thanks for sharing. I only got a sound effect when turning the sound off, but didn't find any others?
There are a few attached to some of the navigation.
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 (
) 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?
Thanks! I'll have a look at your app. It sounds promising.
I really hope we get out of the boxy design in 5 years, and I hope it'll be thanks to Svija and Moos!
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!
Thanks!
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.
• 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
and
https://developer.myscript.com/docs/concepts/responsive-layo...
.)
Thanks so much for taking the time to comment.
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.
Thanks again!
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.
I think it’s the other way around. If someone is a designer and use illustrator, why would they learn HTML and CSS when they can use this?
Maybe there are a lot of use case where this is good enough and perhaps better.
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.
Cool idea, here's some feedback.
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.
“Your scientists were so preoccupied with whether they could, they didn't stop to think if they should.” -- Dr. Ian Malcolm
https://www.youtube.com/watch?v=4PLvdmifDSk
“Those who cannot remember the past are condemned to repeat it,”
George Santayana
What is the past you are refering to? Please give context
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.
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.
So far it has not been an issue. In five years of building sites this way, I have not had a single case where the font rendering was noticeably off.
There is one big fat glaring exception: Safari for Mac doesn't resize fonts exactly, but instead uses a series of steps.
This means that when the page is resized, the text changes size slightly. I had to do a little back-end magic to compensate for this.
You can see for yourself by opening this in Safari and resizing the window:
‹html›‹body style="font-size:5vw"›‹div width=100%›
Slowly drag the side of the window‹br›
and watch when the font changes size‹br›
‹br›
In Safari it jumps, in any other browser it's smooth
‹/div›‹/body›‹/html›
You'll have to swap out the tags — I replaced the real brackets with French single quotes to make it appear correctly (possibly not necessary).
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.
netlify jamspell almost has this it a builtin CMS js that talks directly to git hosts.
This feels like a really bad idea with numerous pitfalls. I have a feeling that it may catch on just like tailwindjs did and have a massive following.
One thing I noticed was that your page always has a horizontal scrollbar on chrome (maybe others?!)
Good luck with it, I hope that your thing is a huge success so I can judge people even more effectively :)
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.
Axe accessibility report on that website:
TOTAL ISSUES 220
AUTOMATIC ISSUES 220
NEEDS REVIEW 160
GUIDED ISSUES 0
Critical 1
Serious 55
Moderate 2
Minor 2
If you read the page called WTF, I talk a lot about accessibility. I totally appreciate the importance of it.
But, the fact that I don't a perfect solution right off the bat is not a reason to stop exploring!
Also: ALL CAPS.
It’s certainly a reason not to use it in production though.
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. :^)
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.
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 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.
Oh, man. It's Flash all over again.
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.
Just Homestar is enough to make your opinion objectively correct.
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.
Cool idea, but the svg blob's (to give it a name) should be loaded externally like an image so that the html stays readable.
Like others said, the site scales, but isn't responsive and thus becomes unusable once you resize a browser window to a smaller size.
Your server seems to return a 500 error when sent a HEAD request:
% curl -I https://svija.love/en/wtf
HTTP/1.1 500 Internal Server Error
Server: nginx/1.18.0 (Ubuntu)
Date: Fri, 03 Dec 2021 23:35:52 GMT
Content-Type: text/html
Content-Length: 145
Connection: keep-alive
X-Frame-Options: SAMEORIGIN
Vary: Cookie, Accept-Language
X-Content-Type-Options: nosniff
Referrer-Policy: same-origin
Content-Language: en
Thanks for the heads up. I'll look into it.
Nice!
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.
Thanks, I've added it to our list of upgrades!
great, see an example in both, dark and light mode, of
https://demo.mro.name/shaarligo
Fuck yeah, I love svgs. I'm not a designer so this isn't really for me, but the potential here is huge. Nice work.
I really really really really really really really really LOVE THIS.
1 feature I love to see, if possible, is to implement either youtube videos or Gifs.
(Would be cool if there was a really basic keyframe animation tool bar, but thats a lot of work) So don't listen to me.
But overall i love this. Thank you for making this!
I like this idea. Using SVG on websites is quite fun to break the rigidness.
Text selection seems very wonky, sadly.
It's because some of the text is rendered from a text tag within svg, and some of the text is drawn.
Websites that play sound upon loading cause me to quit immediately.
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).
The workflow idea behind this is super innovative-- From your SVG program directly to the web.
Of course some bugs to work out, but for a new idea, damn.
Thank you so much. Lots of bugs to work out, and mainly I need to make it much simpler.
I got a similar system where I display an image full screen, with clickable locations based on mouse position.
Like Svija - not a real website.
Got a link?
sounds like an image map.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ma...
very 1999 :)
The website doesn't work for me, the page is white (Brave Browser).
EDIT: It works if I disable the shield/ad-blocker.
I think this is great! it has some drawbacks, but I enjoy seeing others push the web to its limits.
Search engines have only recently learned how to index JS, they will not survive SVG sites :)
They've indexed SVG content for years.
Interesting idea. But no responsive design?
Have you tried it on different screens?
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.
Try that, and reload.
Is there any UI framework build on SVG?
I wish. SVG (with JS) is a fantastic way to build much more flexible UIs than HTML is capable of.
D3 can do it but it's really geared toward data visualization rather than general UIs.
There's not right now but I'm hoping to create one.
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.
I really hope not
Is the tool can create dynamic websites with proper responsiveness to each devices?
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.
Kids can't explain their emotions. Non-developers can't tell what's wrong with websites.
Just because they don't complain about something specifically, it doesn't mean that they don't feel discomfort.
There is more than mobile and desktop; there are tablets that is somewhere in between. Hell, the mobile users can rotate their phone.
Those being said, it could be a viable solution for fixed screen kiosks.
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.
Really neat idea, but comparing this to wordpress seems completely wrong.
I take your point.
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.
This ain't it. Hard pass. May as well just be a hosted PDF.
What would be wrong with a hosted PDF?
- no links
- doesn't resize to the window
- no headers, footers, menus etc.
- different pages don't reuse common fonts or images, making it slower to load
- proprietary format
Anything I'm not thinking of?
Can't select text or use keyboard tabbing?
You can select text unless there's a link over it — you might have tried in a section that is a link to somewhere.
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 as with every casino, the only way to win is to own the casino, not to play the games. We’re all the proverbial suckers at the table.
Lol wut? Does the author advocate keep their money under their couch?
What were you replying to?
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.
)