16 ms·

Show HN: A tool to build real websites built exclusively in SVG

197 points by AndrewSwift 5y ago

frozenport 5y ago
>> 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?
- AndrewSwift 5y ago
  What were you replying to?
AndrewSwift 5y ago
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.
- thesuitonym 5y ago
  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.
  - AndrewSwift 5y ago
    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.
- danrocks 5y ago
  This looks nice! What do the end results look like when used on devices with different screen sizes and resolutions?
  - david927 5y ago
    You can visit the site and resize your browser to get an idea. It just scales it down.
    - ehutch79 5y ago
      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?
    - tata71 5y ago
      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!
  - goohle 5y ago
    Try Ctrl-Shift-M in Firefox.
    - AndrewSwift 5y ago
      cmd-option-M on Mac, and if you reload the page it looks really nice ;-)
- leephillips 5y ago
  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/ 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=1274425 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.
  - AndrewSwift 5y ago
    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.
    - pgcj_poster 5y ago
      > The only exceptions I know of are Illustrator and Inkscape. Aren't those the two most common vector graphics programs?
      - AndrewSwift 5y ago
        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.
- lampe3 5y ago
  What about SEO, a11y, i18n?
  - VikingCoder 5y ago
    What about p27s? ("People who hate abbreviationS")
  - AndrewSwift 5y ago
    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.
    - lampe3 5y ago
      Okay sounds nice good luck with the funding!
  - kingcharles 5y ago
    Chrome tried to auto-translate their example page which is in French, and failed completely.
- rancar2 5y ago
  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).
  - jccooper 5y ago
    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.
  - AndrewSwift 5y ago
    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.
- duped 5y ago
  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.
  - ygra 5y ago
    > 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.
  - AndrewSwift 5y ago
    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.
    - duped 5y ago
      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.
- electroly 5y ago
  There is a typo at the top -- "Ilustrator" in "A WEBSITE BUILDER BASED ON ADOBE ILUSTRATOR".
  - AndrewSwift 5y ago
    Thank you (you'll have to imagine it in all caps).
- pkphilip 5y ago
  Wow! this is amazing! How is responsiveness of the sites impacted by this?
  - wiradikusuma 5y ago
    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.
    - eyelidlessness 5y ago
      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.
- dreamcompiler 5y ago
  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.
  - AndrewSwift 5y ago
    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.
    - temporallobe 5y ago
      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!
    - dreamcompiler 5y ago
      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.
    - indymike 5y ago
      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.
- lbj 5y ago
  Absolutely ingenious. I love what you've done here
  - spicybright 5y ago
    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.
- oofoe 5y ago
  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.
  - AndrewSwift 5y ago
    I'm definitely going to check it out — someone else also mentioned it.
- prox 5y ago
  Can I use Affinity Designer with your tool?
  - AndrewSwift 5y ago
    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 ;-)
- katsura 5y ago
  > 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.
  - AndrewSwift 5y ago
    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, https://svija.love/en/imagine 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.
    - mattlondon 5y ago
      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
  - indymike 5y ago
    For starters: 1. Fitting text to curves. 2. Wrapping text to curves.
- danielvaughn 5y ago
  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?
  - AndrewSwift 5y ago
    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.
- andrecarini 5y ago
  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.
Gys 5y ago
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.
jakearmitage 5y ago
Oh, man. It's Flash all over again.
- xeromal 5y ago
  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.
  - leephillips 5y ago
    Just Homestar is enough to make your opinion objectively correct.
- prewett 5y ago
  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.
fotad 5y ago
Is there any UI framework build on SVG?
- acallaghan 5y ago
  I really hope not
- dreamcompiler 5y ago
  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. https://d3js.org/ https://d3js.org/
- AndrewSwift 5y ago
  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.
david927 5y ago
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.
- jatone 5y ago
  netlify jamspell almost has this it a builtin CMS js that talks directly to git hosts.
derekzhouzhen 5y ago
Interesting idea. But no responsive design?
- AndrewSwift 5y ago
  Have you tried it on different screens?
  - derekzhouzhen 5y ago
    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.
    - AndrewSwift 5y ago
      Try that, and reload.
WorldPeas 5y ago
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.
- AndrewSwift 5y ago
  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).
  - pfraze 5y ago
    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!
    - AndrewSwift 5y ago
      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.
roosgit 5y ago
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.
BasilPH 5y ago
The page looks cool, but I left immediately once the music started playing. There's a reason most websites stopped doing this.
- willio58 5y ago
  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/ https://www.joshwcomeau.com/
  - BasilPH 5y ago
    Thanks for sharing. I only got a sound effect when turning the sound off, but didn't find any others?
    - leephillips 5y ago
      There are a few attached to some of the navigation.
- AndrewSwift 5y ago
  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.
wila 5y ago
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.
wongarsu 5y ago
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.
- cryptoz 5y ago
  Macromedia Flash era was the best for authoring IMO. But I was just a hobbyist, didn't use it professionally.
  - AndrewSwift 5y ago
    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.
    - cunthorpe 5y ago
      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
      - spicybright 5y ago
        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?
  - ehutch79 5y ago
abstract_put 5y ago
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?
- AndrewSwift 5y ago
  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).
  - abstract_put 5y ago
    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).
  - spicybright 5y ago
    I wish you the very best. This has potential to fill in the long standing gap of designs to implementations flash used to fill. 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? :)
FpUser 5y ago
Websites that play sound upon loading cause me to quit immediately.
- AndrewSwift 5y ago
  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).
ReleaseCandidat 5y ago
“Those who cannot remember the past are condemned to repeat it,” George Santayana
- gtsop 5y ago
  What is the past you are refering to? Please give context
  - CodeGlitch 5y ago
    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.
bronlund 5y ago
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/ https://www.arngren.net/)
TruthWillHurt 5y ago
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.
- AndrewSwift 5y ago
  Got a link?
  - mkoryak 5y ago
    sounds like an image map. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ma... very 1999 :)
robertlagrant 5y ago
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
- AndrewSwift 5y ago
  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.
  - robertlagrant 5y ago
    > Also: ALL CAPS. Yes, the report is output in all caps. Nothing wrong with your eyes!
  - flooq 5y ago
    It’s certainly a reason not to use it in production though.
geenat 5y ago
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.
- AndrewSwift 5y ago
  Thank you so much. Lots of bugs to work out, and mainly I need to make it much simpler.
robertoandred 5y ago
Can't select text or use keyboard tabbing?
- AndrewSwift 5y ago
  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.
tinaprice 5y ago
Is the tool can create dynamic websites with proper responsiveness to each devices?
- AndrewSwift 5y ago
  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.
  - cunthorpe 5y ago
    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.
  - derekzhouzhen 5y ago
    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.
  - erinaceousjones 5y ago
    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-reader/ 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....
streamofdigits 5y ago
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.
ibdf 5y ago
Really neat idea, but comparing this to wordpress seems completely wrong.
- AndrewSwift 5y ago
  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.
lucideer 5y ago
> 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 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.
- cunthorpe 5y ago
  To me it sounds like the author has nearly-zero experience in web development and thus prefers publishing websites straight out of Illustrator.
  - AndrewSwift 5y ago
    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.
- dsizzle 5y ago
  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.
cunthorpe 5y ago
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
- npteljes 5y ago
  > Just ship a PDF already Like this website? https://lab6.com/ https://lab6.com/ (Hacker News discussion: https://news.ycombinator.com/item?id=27880905 https://news.ycombinator.com/item?id=27880905)
- spicybright 5y ago
  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"
  - cunthorpe 5y ago
    > 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.
    - spicybright 5y ago
      > 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.
- kfootball15 5y ago
  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?
thomasikzelf 5y ago
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 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?
- AndrewSwift 5y ago
  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!
gbromios 5y ago
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.
kingcharles 5y ago
“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 https://www.youtube.com/watch?v=4PLvdmifDSk
mro_name 5y ago
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.
- AndrewSwift 5y ago
  Thanks, I've added it to our list of upgrades!
  - mro_name 5y ago
    great, see an example in both, dark and light mode, of https://demo.mro.name/shaarligo https://demo.mro.name/shaarligo
smpetrey 5y ago
This ain't it. Hard pass. May as well just be a hosted PDF.
- AndrewSwift 5y ago
  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?
ASpaceCowboi 5y ago
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!
XCSme 5y ago
The website doesn't work for me, the page is white (Brave Browser). EDIT: It works if I disable the shield/ad-blocker.
kaetemi 5y ago
I like this idea. Using SVG on websites is quite fun to break the rigidness. Text selection seems very wonky, sadly.
- pedalpete 5y ago
  It's because some of the text is rendered from a text tag within svg, and some of the text is drawn.
Xevi 5y ago
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.
pedalpete 5y ago
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.
- quickthrower2 5y ago
  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.
  - quitit 5y ago
    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.
- tenebrisalietum 5y ago
  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.
Thoreandan 5y ago
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. :^)
ronsor 5y ago
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
- AndrewSwift 5y ago
  Thanks for the heads up. I'll look into it.
jancsika 5y ago
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.
- AndrewSwift 5y ago
  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).
adamredwoods 5y ago
I think this is great! it has some drawbacks, but I enjoy seeing others push the web to its limits.
mihamaker 5y ago
Search engines have only recently learned how to index JS, they will not survive SVG sites :)
- AndrewSwift 5y ago
  They've indexed SVG content for years.
junon 5y ago
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.
mkoryak 5y ago
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 :)
chrismorgan 5y ago
• 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/ http://www.styluslabs.com/ and https://developer.myscript.com/docs/concepts/responsive-layout/ https://developer.myscript.com/docs/concepts/responsive-layo....)
- AndrewSwift 5y ago
  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!

197 points by AndrewSwift 5y ago

>> 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?

AndrewSwift 5y ago
What were you replying to?

AndrewSwift 5y ago

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.

thesuitonym 5y ago
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.
- AndrewSwift 5y ago
  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.
danrocks 5y ago
This looks nice! What do the end results look like when used on devices with different screen sizes and resolutions?
- david927 5y ago
  You can visit the site and resize your browser to get an idea. It just scales it down.
  - ehutch79 5y ago
    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?
  - tata71 5y ago
    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!
- goohle 5y ago
  Try Ctrl-Shift-M in Firefox.
  - AndrewSwift 5y ago
    cmd-option-M on Mac, and if you reload the page it looks really nice ;-)
leephillips 5y ago
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/ 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=1274425 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.
- AndrewSwift 5y ago
  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.
  - pgcj_poster 5y ago
    > The only exceptions I know of are Illustrator and Inkscape. Aren't those the two most common vector graphics programs?
    - AndrewSwift 5y ago
      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.
lampe3 5y ago
What about SEO, a11y, i18n?
- VikingCoder 5y ago
  What about p27s? ("People who hate abbreviationS")
- AndrewSwift 5y ago
  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.
  - lampe3 5y ago
    Okay sounds nice good luck with the funding!
- kingcharles 5y ago
  Chrome tried to auto-translate their example page which is in French, and failed completely.
rancar2 5y ago
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).
- jccooper 5y ago
  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.
- AndrewSwift 5y ago
  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.
duped 5y ago
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.
- ygra 5y ago
  > 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.
- AndrewSwift 5y ago
  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.
  - duped 5y ago
    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.
electroly 5y ago
There is a typo at the top -- "Ilustrator" in "A WEBSITE BUILDER BASED ON ADOBE ILUSTRATOR".
- AndrewSwift 5y ago
  Thank you (you'll have to imagine it in all caps).
pkphilip 5y ago
Wow! this is amazing! How is responsiveness of the sites impacted by this?
- wiradikusuma 5y ago
  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.
  - eyelidlessness 5y ago
    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.
dreamcompiler 5y ago
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.
- AndrewSwift 5y ago
  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.
  - temporallobe 5y ago
    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!
  - dreamcompiler 5y ago
    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.
  - indymike 5y ago
    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.
lbj 5y ago
Absolutely ingenious. I love what you've done here
- spicybright 5y ago
  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.
oofoe 5y ago
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.
- AndrewSwift 5y ago
  I'm definitely going to check it out — someone else also mentioned it.
prox 5y ago
Can I use Affinity Designer with your tool?
- AndrewSwift 5y ago
  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 ;-)
katsura 5y ago
> 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.
- AndrewSwift 5y ago
  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, https://svija.love/en/imagine 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.
  - mattlondon 5y ago
    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
- indymike 5y ago
  For starters: 1. Fitting text to curves. 2. Wrapping text to curves.
danielvaughn 5y ago
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?
- AndrewSwift 5y ago
  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.
andrecarini 5y ago
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.

Gys 5y ago

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.

jakearmitage 5y ago

Oh, man. It's Flash all over again.

xeromal 5y ago
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.
- leephillips 5y ago
  Just Homestar is enough to make your opinion objectively correct.
prewett 5y ago
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.

fotad 5y ago

Is there any UI framework build on SVG?

acallaghan 5y ago
I really hope not
dreamcompiler 5y ago
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. https://d3js.org/ https://d3js.org/
AndrewSwift 5y ago
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.

david927 5y ago

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.

jatone 5y ago
netlify jamspell almost has this it a builtin CMS js that talks directly to git hosts.

derekzhouzhen 5y ago

Interesting idea. But no responsive design?

AndrewSwift 5y ago
Have you tried it on different screens?
- derekzhouzhen 5y ago
  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.
  - AndrewSwift 5y ago
    Try that, and reload.

WorldPeas 5y ago

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.

AndrewSwift 5y ago
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).
- pfraze 5y ago
  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!
  - AndrewSwift 5y ago
    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.

roosgit 5y ago

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.

BasilPH 5y ago

The page looks cool, but I left immediately once the music started playing. There's a reason most websites stopped doing this.

willio58 5y ago
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/ https://www.joshwcomeau.com/
- BasilPH 5y ago
  Thanks for sharing. I only got a sound effect when turning the sound off, but didn't find any others?
  - leephillips 5y ago
    There are a few attached to some of the navigation.
AndrewSwift 5y ago
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.

wila 5y ago

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.

wongarsu 5y ago

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.

cryptoz 5y ago
Macromedia Flash era was the best for authoring IMO. But I was just a hobbyist, didn't use it professionally.
- AndrewSwift 5y ago
  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.
  - cunthorpe 5y ago
    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
    - spicybright 5y ago
      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?
- ehutch79 5y ago

abstract_put 5y ago

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?

AndrewSwift 5y ago
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).
- abstract_put 5y ago
  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).
- spicybright 5y ago
  I wish you the very best. This has potential to fill in the long standing gap of designs to implementations flash used to fill. 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? :)

FpUser 5y ago

Websites that play sound upon loading cause me to quit immediately.

AndrewSwift 5y ago
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).

ReleaseCandidat 5y ago

“Those who cannot remember the past are condemned to repeat it,” George Santayana

gtsop 5y ago
What is the past you are refering to? Please give context
- CodeGlitch 5y ago
  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.

bronlund 5y ago

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/ https://www.arngren.net/)

TruthWillHurt 5y ago

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.

AndrewSwift 5y ago
Got a link?
- mkoryak 5y ago
  sounds like an image map. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ma... very 1999 :)

robertlagrant 5y ago

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

AndrewSwift 5y ago
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.
- robertlagrant 5y ago
  > Also: ALL CAPS. Yes, the report is output in all caps. Nothing wrong with your eyes!
- flooq 5y ago
  It’s certainly a reason not to use it in production though.

geenat 5y ago

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.

AndrewSwift 5y ago
Thank you so much. Lots of bugs to work out, and mainly I need to make it much simpler.

robertoandred 5y ago

Can't select text or use keyboard tabbing?

AndrewSwift 5y ago
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.

tinaprice 5y ago

Is the tool can create dynamic websites with proper responsiveness to each devices?

AndrewSwift 5y ago
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.
- cunthorpe 5y ago
  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.
- derekzhouzhen 5y ago
  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.
- erinaceousjones 5y ago
  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-reader/ 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....

streamofdigits 5y ago

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.

ibdf 5y ago

Really neat idea, but comparing this to wordpress seems completely wrong.

AndrewSwift 5y ago
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.

lucideer 5y ago

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

cunthorpe 5y ago
To me it sounds like the author has nearly-zero experience in web development and thus prefers publishing websites straight out of Illustrator.
- AndrewSwift 5y ago
  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.
dsizzle 5y ago
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.

cunthorpe 5y ago

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

npteljes 5y ago
> Just ship a PDF already Like this website? https://lab6.com/ https://lab6.com/ (Hacker News discussion: https://news.ycombinator.com/item?id=27880905 https://news.ycombinator.com/item?id=27880905)
spicybright 5y ago
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"
- cunthorpe 5y ago
  > 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.
  - spicybright 5y ago
    > 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.
kfootball15 5y ago
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?

thomasikzelf 5y ago

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 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?

AndrewSwift 5y ago
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!

gbromios 5y ago

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.

kingcharles 5y ago

“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 https://www.youtube.com/watch?v=4PLvdmifDSk

mro_name 5y ago

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.

AndrewSwift 5y ago
Thanks, I've added it to our list of upgrades!
- mro_name 5y ago
  great, see an example in both, dark and light mode, of https://demo.mro.name/shaarligo https://demo.mro.name/shaarligo

smpetrey 5y ago

This ain't it. Hard pass. May as well just be a hosted PDF.

AndrewSwift 5y ago
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?

ASpaceCowboi 5y ago

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!

XCSme 5y ago

The website doesn't work for me, the page is white (Brave Browser). EDIT: It works if I disable the shield/ad-blocker.

kaetemi 5y ago

I like this idea. Using SVG on websites is quite fun to break the rigidness. Text selection seems very wonky, sadly.

pedalpete 5y ago
It's because some of the text is rendered from a text tag within svg, and some of the text is drawn.

Xevi 5y ago

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.

pedalpete 5y ago

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.

quickthrower2 5y ago
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.
- quitit 5y ago
  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.
tenebrisalietum 5y ago
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.

Thoreandan 5y ago

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. :^)

ronsor 5y ago

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

AndrewSwift 5y ago
Thanks for the heads up. I'll look into it.

jancsika 5y ago

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.

AndrewSwift 5y ago
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).

adamredwoods 5y ago

I think this is great! it has some drawbacks, but I enjoy seeing others push the web to its limits.

mihamaker 5y ago

Search engines have only recently learned how to index JS, they will not survive SVG sites :)

AndrewSwift 5y ago
They've indexed SVG content for years.

junon 5y ago

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.

mkoryak 5y ago

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 :)

chrismorgan 5y ago

• 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/ http://www.styluslabs.com/ and https://developer.myscript.com/docs/concepts/responsive-layout/ https://developer.myscript.com/docs/concepts/responsive-layo....)

AndrewSwift 5y ago
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!