11 ms·

Show HN: All-SVG websites with complex animation

188 points by AndrewSwift 4y ago

I created a system for building SVG-only websites called Svija. But, though the content was nice, the sites felt too static — a bit flat and lifeless. Even a basic HTML website has mouseover effects, but SVG doesn't have them for free the way HTML does. I wanted to find an easy way to recreate mouseover functionality in SVG. For my first try, I labeled objects in Adobe Illustrator: • linkSomeName: an invisible link <rect> (over the link text) • mouseoverSomeName: a <g> mouseover decoration (usually bold or colored text, or an underline), initially hidden The two objects are connected by "SomeName", and a javascript event listener attached to the link object would change the mouseover object's CSS display from "none" to "block". Once I had used it for a bit, I thought that it might be nicer if the effects faded in and out. So, I tried animating the transitions with GSAP. It immediately became clear that there was enormous potential to manage complex animations visually, and I worked over the summer to create Svija Vibe. It's all based on linking Adobe Illustrator object names to the GSAP script. Most basic transformations already work well but there's a lot I'll be able to do to make it even simpler to use. I'm really excited about it! I've only just started but I have a million ideas about how to make it more capable — the big one being the ability to chain animations together. There's a support document at https://tech.svija.love/how/animation https://tech.svija.love/how/animation that gives more detail about exactly what can be done. Svija Vibe is free. It works with Svija, which is also free, but you do need to create an account to use it (Maconly, at least for the next three months). https://news.ycombinator.com/item?id=29430368 https://news.ycombinator.com/item?id=29430368 · previous HN about Svija 2022-12-03 https://news.ycombinator.com/item?id=30454324 https://news.ycombinator.com/item?id=30454324 · previous HN about animation 2022-02-24 https://greensock.com https://greensock.com · GSAP

deleted 4y ago
[deleted]
Springtime 4y ago
Does the site require cookies btw? As it appears to be in an infinite reload loop in two browsers I tested. I'm fond of using SVGs for richer content and always like to see them utilized in creative ways so seems like a cool concept.
- AndrewSwift 4y ago
  It does require cookies — did your loop occur with cookies on or off? Without cookies it will try to redirect to the desktop version and fail — if you visit in a tall narrow window it should show you the mobile version and not reload.
  - Springtime 4y ago
    I see. Yeah I had cookies disabled in both browsers I tried. Trying using a narrow viewport does load fine, although it's possible to have dual-purpose desktop and mobile styling in a single SVG using media queries, which I've done before (not sure how your desktop version differs though).
    - AndrewSwift 4y ago
      The reason why we need cookies is to deliver different versions depending on the platform. By default, the mobile version is served. If it turns out that the request came from a big screen, a cookie is set and the page is reloaded. From then on, the cookie is used and the big-screen version is sent by default. The point is just to have a single address for each page but to deliver appropriate content depending on the platform.
- deleted 4y ago
  [deleted]
deleted 4y ago
[deleted]
kevmo314 4y ago
Why does text rendering in svg elements always look slightly off? As in, I can tell that this website isn't native. The same thing happens with Flutter Web sites which I believe uses a similar idea of render many things with canvas/svg.
- danielvaughn 4y ago
  Probably because there hasn't been a ton of browser-level work on their SVG engine, as opposed to CSS rendering at least. Like the SVG2 spec has been lingering for years. Personally I'd love to see more activity there - SVG is awesome and it has more potential than is currently being utilized (IMO).
- jancsika 4y ago
  > Why does text rendering in svg elements always look slightly off? The rendering of text is pixel exact between HTML and SVG in every modern browser I've tested with. What you might be noticing is the distance between consecutive lines of text. HTML can flow text in a rectangle and automatically handle whatever inter-line settings were given in CSS (or the browser default). SVG cannot flow text-- the user has to specify an x,y for each line. My guess is that it's difficult to figure out how to replicate whatever the HTML algo is for interline spacing of text for arbitrary fonts. Additionally, the SVG library would need to manually handle word wrapping. Just with those two you can easily end up in the uncanny value of SVG, especially when the user starts zooming in or out.
  - mhink 4y ago
    If you're confident that you'll always be dealing with a browser environment, this is a situation where embedding HTML in SVG via <foreignObject> is a pretty reasonable approach, IMO.
  - gernb 4y ago
    what do you mean by "pixel exact". svg definitely renders differing amounts of pixels on my different devices. one with dpr 2.0, one with dpr 3.0, one with dpr 1.25
whylo 4y ago
From the FAQ: > Svija pages are fully-readable by screen readers, and you can add special text for each page in Svija Admin, visible only to screen readers. I tested the accessibility with a keyboard and screen reader. With a keyboard, when you press the tab key, focus should usually go left-to-right, top-to-bottom. On this page the first link you tab to is 'Request Access'. From there the tab key goes backwards, to FAQ, Examples etc, then up to Vibe, Blazing Speed etc. Then it jumps down to the footer, does the same reverse order, then jumps all over the place. The buttons in the main content to trigger animations aren't focussable at all, so aren't accessible without a mouse or touchscreen. I explored the page with NVDA (a free screen reader) and found a number of sections and links where what was read out was different to what was shown in screen. It looks like you have a hidden HTML DOM that's exposed to screen readers and I assume this is out of sync somehow with what's on screen? I also got a bunch of links that didn't appear on the screen at all. Exploring with the NVDA elements list (Insert+F7) shows a lot of junk in the Links list - links with text like 'id1584143858', 'UCmfF3YOMVyRcd0m-WpMUZ2g' etc. The Buttons list doesn't show the animation trigger buttons (because they're not marked up as buttons) and the Landmarks list is empty, meaning no easy way to jump to nav, header, footer etc. Browser zoom is completely broken. The page looks the same at 500% zoom as it does at 100%. Accessibility is important, and it's really disheartening when new page-building platforms like this pop up that clearly haven't been audited by an accessibility specialist or run past a disabled person who uses assisitve technology, especially when they specifically give the impression they're accessible as the FAQ answer does
- AndrewSwift 4y ago
  I agree wholeheartedly that accessibility is important, but I can't devote engineering resources to it until I have a product that's compelling in its own right. Right now I'm just trying to make an interesting platform to explore what's possible with SVG. Please believe me that when we are able to move forward, accessibility is very high on our priority list.
  - deleted 4y ago
    [deleted]
  - 4y ago
warent 4y ago
There's no way this is accessible right? Imagine someone with a screen reader opening this website and seeing nothing
- deleted 4y ago
  [deleted]
- Tagbert 4y ago
  SVG is XML, a screen reader would be able to access it.
  - whylo 4y ago
    Just being XML doesn't make something accessible - I tested with a screen reader and found a lot of issues: https://news.ycombinator.com/item?id=33520364 https://news.ycombinator.com/item?id=33520364
    - Tagbert 4y ago
      I don’t doubt it, that kind of issue with navigation sequence is easy to mess up if you don’t prioritize it. I just meant that it being SVG is not inherently invisible to screen readers in the way that Flash was. It still means that they need to put some effort into organizing the navigation.
    - AndrewSwift 4y ago
      It's actually worse ;-) because the pages are constructed in Illustrator, the order of text is all messed up. Elements that are drawn first are higher in the SVG, but that only means that they're in back in Illustrator — not that they're higher on the page. It's pretty common to have a page where the header of the page is modified last, making it the last element in the SVG. Right now our planned solution will require server-side analysis of text size and placement. More long-term, we will use HTML for text and SVG for everything else. But that will require an editing program that doesn't yet exist.
      - 4y ago
zagrebian 4y ago
That web page looks… interesting without JavaScript https://imgur.com/ISKnuhT https://imgur.com/ISKnuhT
- sibit 4y ago
  Honestly doesn't look that different compared to a lot of "modern" oversized gridless webpages people peddle nowadays.
- deleted 4y ago
  [deleted]
- pvg 4y ago
  Please don't post shallow dismissals, especially of other people's work. https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html
  - nr2x 4y ago
    I think it’s a fair point when it comes to accessibility as discussed in another comment.
    - pvg 4y ago
      It's about the form rather than the point. The point is fine.
  - zagrebian 4y ago
    Please don’t gaslight me.
    - pvg 4y ago
      I prefer to think of it as gasenlightening.
- nr2x 4y ago
  To be fair so does any website made after 2000.
nashashmi 4y ago
This is like the successor to flash.
- excitednumber 4y ago
  https://upload.wikimedia.org/wikipedia/en/8/83/Strong_Bad.png https://upload.wikimedia.org/wikipedia/en/8/83/Strong_Bad.pn...
- sandreas 4y ago
  Hehe, yeah forget wasm, let's all use SVG :-) I doubt that flash will ever get "replaced", not even https://ruffle.rs/ https://ruffle.rs/ is feature complete.
  - 1attice 4y ago
    I imagine wasm and all-svg pair really well.
    - AndrewSwift 4y ago
      If all goes well we'll be using WASM to produce our own SVG/HTML hybrid pages in a couple of years ;-)
- AndrewSwift 4y ago
  That's true. I used to build Flash websites and I started this project because I couldn't see myself building HTML/CSS for the rest of my life. Although there were many horrible Flash websites there were some really glorious ones too. And if I can pursue this project using mainstream, standards compliant technology, I can replicate some of the good things without the exclusive, resource-heavy player that was needed for Flash.
- adamredwoods 4y ago
  GreenSock used to be a Flash library! https://greensock.com/gsap/ https://greensock.com/gsap/
ericmcer 4y ago
This is sick but replacing html elements with svg is going to be a huge tangled mess and you will be playing catchup forever. Look at huge companies with teams of engineers constantly trying to make sure their browsers render all html elements to spec. You are going to need to do the same with svg or users will get frustrated. Maybe figure out a subset or a specific functionality that html elements struggle with but svg excels at, or present this as an alternative to a traditional webpage (like a page specifically for interacting with animations or playing a game or something). As far as building websites using only svg instead of html elements, that is a crazy lift to attempt.
- AndrewSwift 4y ago
  One of the things I like about SVG is that it's the same everywhere. You can look at our site on any major browser and it's exactly the same down to the pixel. Sure there are some rough edges — this is a proof of concept. Long term, I would like to create an editing program that combines the best of SVG and HTML, because there are obviously many places where HTML offers a lot more. That will be a huge project that will require funding, so right now I'm seeing how far I can push SVG by itself.
  - xtian 4y ago
    For the common use-cases, SVGs do render consistently across browsers, but there are differences in feature support and rendering behavior outside of those. refX/refY is one example of this. These attributes were added to the SVG spec in 2015 and didn’t have support in all major browsers until a few weeks ago.
  - danielheath 4y ago
    Until you start using responsive design in your SVGs, since it supports CSS with media queries :)
    - AndrewSwift 4y ago
      Our plan is not to do responsive design — Svija is really meant for designers, and for any content that requires real design, there will need to be separate versions for mobile and desktop anyway. Part of what's fun about Svija is that you can design content very rapidly, since the page is an exact reflection of the Illustrator file. I suspect that introducing responsive aspects would break that experience. However, we will be producing a page editor at some point in the future and when that day arrives we'll be looking into how best to handle these issues. Right now, with Illustrator as an editor, it's just not possible. Svija works by sending the smallest configured page (the mobile version) for the first request then checking the browser. If it's a bigger window, then the page is reloaded and only the correct version is sent for any future requests. I want to be clear that I am not saying that all sites should be built this way — Svija is an experiment to see if this makes sense.
nulld3v 4y ago
Unfortunately, this is definitely not "responsive". It's effectively just displaying an image and then scaling it to fit as you resize your browser. - It doesn't work properly if I resize the page after the page loads. E.g. if I load the page and then scale the browser window, all it does is make everything super small. It kind of works again after I refresh the page though. - It only has a couple of scaling breakpoints. E.g. If I try to have the page take up half the screen while I do something else on the other half, the page's font becomes absolutely tiny. It also becomes unusably large on widescreens. - Zooming does nothing As far as I'm aware, the last two problems are not easily solvable when using absolute positioning like Svija does.
- deleted 4y ago
  [deleted]
- marginalia_nu 4y ago
  Why does it have to be responsive?
  - nulld3v 4y ago
    It doesn't, but if it isn't, then it shouldn't claim to be responsive. Being responsive is nice for usability because then the site can adapt to any screen/window size. However, in my opinion, it is also fine if the site can adapt to the most common screen/window sizes. Right now I see you have two artboards in the illustrator file, one for mobile and one for desktop. I think you should at least have another two for half-desktop and tablet. Widescreen should be considered too but for that you can just center the desktop artboard on the page. I'm not sure what to do regarding zoom though. Ideally it would allow you to change the size of the content while still ensuring the content fits on the page so you don't have to scroll horizontally. However, I don't think that's achievable in this case without making artboards for each zoom level. I guess you could just do zoom and pan?
    - nulld3v 4y ago
      Whoops, for some reason thought you were OP. Please s/you/they.
airstrike 4y ago
So many comments about how this is missing feature X or Y, isn't responsive, or isn't accessible... It would be nice to have people focus on its achievements rather than its pitfalls, unless the author has claimed it is a built-in replacement for HTML/CSS (which I don't think they did) Rome wasn't built in a day. Not everything can solve all of the problems at the same time. Not everyone has unlimited time and resources. Is it not laudable to keep pushing the envelope of what's possible and experiment creatively? Creating is really hard, destroying is alluringly easy.
- AndrewSwift 4y ago
  Thank you. I really poured my heart and soul into this project, and I think that the idea of creating animation by naming objects in a graphical interface has a lot of potential. It's obviously a prototype — I've been building websites since 1995 and believe me, I have a long list of missing features and capabilites that need to be added in.
  - ghostbrainalpha 4y ago
    I've been building websites for about the same amount of time, and have never done JS animations and stayed away from GreenSock because I was scared of it, even though I was always curious. This is the first time I've felt like the effort to learn and make something cool would be worth it. Thank you!
    - AndrewSwift 4y ago
      Greensock is really great. It's pretty easy to use if you know a little JS, and it's very powerful. And, their support resources are top notch — very important for a tool that powerful.
- deleted 4y ago
  [deleted]
- pvg 4y ago
  These sorts of meta comments end up being just noise because the discussion changes over time. If you want to move the thread in a direction you think is better, be/write the change/comment you want to see in the world/thread.
ouija 4y ago
Just some test feedback: On my phone I have to scroll horizontally to read the text on the website. A part is always cut off. (Same problem on the linked example sites.)
- AndrewSwift 4y ago
  Are you on Android or iPhone? Which model? Which browser? I assume you are using the phone in portrait mode. This seems like an actual bug and I would like to try to reproduce it if possible. If you're willing you can email me at andy@svija.c_m
teddyh 4y ago
I’d honestly prefer an inline PDF. At least then I would probably be able to print it. This thing has all the drawbacks of a Flash-only site, except instead of just requiring a browser plugin, it requires Google Chrome to browse (I found multiple things which did not work in Firefox). The Web was created to have many levels of fallback rendering; “alt” attributes on images, <noscript> tags, font lists in CSS, etc., not to mention the large number of semantic tags not only present in the original HTML, but kept and increased in HTML5. This thing burns all that to the ground and establishes a new lowest acceptable level of web browser (and user able to view it). I mean, don’t get me wrong: this thing is cool and all, and I, too, have experimented with SVG web pages. But this is not making the web any better.
- deleted 4y ago
  [deleted]
- nashashmi 4y ago
  JPGs/PNGs are not making the web any better either. We still use them. SVGs are slightly better. They have readable content and don't pixelate. Plus they react. Reminds me of the dreamweaver slicer days.
  - teddyh 4y ago
    If you made an entire web page be a JPEG or PNG image with Javascript to handle clicks, I would not like that, either.
    - AndrewSwift 4y ago
      If it was JPG or PNG, you could not select the text, embed links, or reuse parts of the page. And nobody could copy the source code to make the web a better place. When someone says that SVG is just a big image — well, that is not always the case. We have gone to great lengths to preserve text as text, to preserve images as images, and to use regular links. That is why we require Adobe Illustrator — it's the only SVG-capable editor that allows for real text and images. If you look at the source for a Svija page, it's a mess — but it does look like web page source.
tylerfoster 4y ago
And in a Flash, Shockwave is back :) This approach is going to have a lot of same accessibility issue.
- deleted 4y ago
  [deleted]
mNovak 4y ago
Personally, I think this is incredibly impressive! It feels much more like reading a magazine than a fixed info-port. Given, there's a time and place for both, but it's always nice to remember the web can be about creative expression.
- AndrewSwift 4y ago
  Thank you so much.
genezeta 4y ago
Just so you know: The "What it does" section, with the buttons "Movement", "Rotation", etc. The behaviour of those buttons is not very intuitive. press and hold is hardly the first action someone thinks of when seeing those buttons. Instead they'll click them. They'll see some weird small movement in the corresponding square, if anything (In the last 2, nothing happens if you just click). What's more, in the following section "No programming", the example shown says explicitly "click here" and explains that the blue rectangle "will be rotated 35º clockwise when the user clicks the trigger". "clicks" is even bolded. And yet, if you simply click it, it will only rotate a few degrees and return back instantly. Again, you need to press and hold for it to rotate completely. I'd suggest either changing the wording or adding an explanation to tell the user to press and hold, or changing the behaviour of the examples to actually trigger on click.
- AndrewSwift 4y ago
  I actually cheated a bit — you are right that it's not clicking, it's pressing. I tried various things, and this felt the most fun. You obviously feel differently. The "cheat text" that says how it works is just meant to give a general idea. Most people would say they "clicked" the button, whether they were talking about mousedown, mouseup, long press etc. The actual commands are slightly more complex — but this page is not the place to get into the details of what's a mousedown, mouseup, click, press etc.
  - genezeta 4y ago
    Ok. But I didn't mean that as a discussion on what is a click or a mousedown, or what is fun. That's your decision, of course. What I meant is that most people will just click and not see the action triggered as expected. Some may then try long pressing, but many won't. The result being that a large number of people won't get the expected impression from the demo and may even think that it's not working correctly.
    - AndrewSwift 4y ago
      I understood that — my answer was a bit clumsy. The page doesn't actually suggest that you click on the buttons — they're just buttons (except for one, where it says "click here"). To me it seemed natural to hold down the button until the effect finished, and now I'm wondering if it's a difference between trackpad and mouse users. I use a trackpad, and it's a relatively slow operation to click. I don't have a mouse handy, but it seems like it would be much quicker. I will ask some of our testers what they think.
ruuda 4y ago
I was hoping this was something interactive using only svg. For example, one can do interactive charts with moving tooltips and a vertical cursor etc. fully in svg, using only hover states. (I thought Pygal [1] did this, but now that I check it again, it seems to require javascript for the tooltips.) This page is definitely not svg-only though, there is a lot of javascript on the page, and without javascript enabled I only see some curved shapes, and blurry things scroll by when I scroll. [1]: https://www.pygal.org/en/stable/documentation/first_steps.html https://www.pygal.org/en/stable/documentation/first_steps.ht...
- deleted 4y ago
  [deleted]
- ruuda 4y ago
  Here’s an example of what I mean, an interactive svg-only graph: https://gist.githubusercontent.com/ruuda/b84e94c3394f740d05bc803565a5cff3/raw/d2d25ae8e616eb13743e5c7ef0f227c9ccdd47e8/cpu_time.svg https://gist.githubusercontent.com/ruuda/b84e94c3394f740d05b...
- AndrewSwift 4y ago
  I would love to add interactivity, and there are also a lot of SVG effects that we haven't even touched. I need to clean up the animation programming and make it more straightforward, then I'll be able to get into that stuff. By SVG-only, I meant that there is no HTML. It also uses NginX, bash scripting, CSS, and Django ;-)
thebeastie 4y ago
Does it support lighting effects?
- AndrewSwift 4y ago
  It does not. Right now, Svija only supports effects that can be created within Adobe Illustrator. From what I have seen, these kinds of effects are easy to reproduce with regular Illustrator effects. It might be interesting in more advanced animation to change the lighting with other movement.
webmobdev 4y ago
It's fantastic! Just wish it could be used with open source editors like Inkscape or Krita, instead of AI.
- AndrewSwift 4y ago
  We would love that. The problem is that only Illustrator leaves text as text and images as images — all the others except Inkscape convert text and images into data that's no longer searchable. With Inkscape, the issue is that AFAIK it's not fully scriptable, making it complicated to use with Svija, and there is not a big user base (I've tried unsuccessfully to get real numbers, so I'm judging by participation in SVG forums, things like that).
Ptchd 4y ago
The text is not SVG...
- AndrewSwift 4y ago
  It is SVG — it's in <tspan> elements: <tspan class="stVibe-CP1"> lets you take any element or </tspan>
markisus 4y ago
Curious if anyone actually agrees with the supposed benefits of scroll hijacking. I find it jarring and always hate this effect when I come across it. > Scroll canceling enables you to animate objects that don't scroll with the page.The event is locked to the vertical scroll position, but the animation doesn't scroll vertically.It's enjoyable for the user and gives them a sense of control over their experience — always a way to keep your visitors interested. As you can see, it's a lot of fun — and we've only scratched the surface!
- chii 4y ago
  it's acceptable to scroll jack if the site curates that experience specifically for a specific purpose that the user would enjoy. It's not really good for a general, informational website.
  - AndrewSwift 4y ago
    I agree, and in fact I only added this feature because a client requested it ;-) but I'm glad it did because it can be fun if it's done right. It can be very user-hostile, and reminds me of criticisms of Flash. I obviously can't control what our users will do, but my own guiding principle is that the user should always feel in absolute control of the page. I've been to so many sites where there's essentially a small movie that you scrub through by scrolling, and it makes it impossible to navigate normally or jump to the content you want.
  - ChymeraXYZ 4y ago
    I have personally not seen one single case where the website managed to do that. Ever.
mixmastamyk 4y ago
Woah, locked up my computer like it hasn't in about ten years. Luckily had sshd running, but still couldn't get it to do much. Had to resort to magic sysreq keys to sync and reboot safely.
- AndrewSwift 4y ago
  Would you be willing to share which computer, Linux version and browser you are using? In general we have not had any issues like this. If I had to guess it would say that it is the Vibe and Home pages that cause problems because they have more animation than the other pages (frequent interrupts). Any info would be great.
  - mixmastamyk 4y ago
    Linux Mint 21, latest Firefox, 12th gen intel gfx. I’d guess it was the gfx driver as this shouldn’t happen no matter what page is doing.
    - ChuckNorris89 4y ago
      Intel 12th gen is probably too "fresh" for the kernel and drivers of Linux Mint 21.
      - deleted 4y ago
        [deleted]
    - AndrewSwift 4y ago
      Thanks for the info. Sorry for crashing your computer.
markmiro 4y ago
What I love about this is how the design looks different from what you'd get if you designed a site in a more common way. Every tool has different affordances. And I love that you can see that in the site. It's immediately obvious that something about the creation of the website is unique
- AndrewSwift 4y ago
  Thanks for taking the time to visit!
dusted 4y ago
I kinda love how these generally give off a early 2000s Flash site vibe (in a good way, Flash, dear flash, how I miss the aesthetic, creative freedom, lightheartedness that you brought to the interwebbes)
- AndrewSwift 4y ago
  Thanks, I feel the same way.

188 points by AndrewSwift 4y ago

deleted 4y ago

[deleted]

Springtime 4y ago

Does the site require cookies btw? As it appears to be in an infinite reload loop in two browsers I tested. I'm fond of using SVGs for richer content and always like to see them utilized in creative ways so seems like a cool concept.

AndrewSwift 4y ago
It does require cookies — did your loop occur with cookies on or off? Without cookies it will try to redirect to the desktop version and fail — if you visit in a tall narrow window it should show you the mobile version and not reload.
- Springtime 4y ago
  I see. Yeah I had cookies disabled in both browsers I tried. Trying using a narrow viewport does load fine, although it's possible to have dual-purpose desktop and mobile styling in a single SVG using media queries, which I've done before (not sure how your desktop version differs though).
  - AndrewSwift 4y ago
    The reason why we need cookies is to deliver different versions depending on the platform. By default, the mobile version is served. If it turns out that the request came from a big screen, a cookie is set and the page is reloaded. From then on, the cookie is used and the big-screen version is sent by default. The point is just to have a single address for each page but to deliver appropriate content depending on the platform.
deleted 4y ago
[deleted]

deleted 4y ago

[deleted]

kevmo314 4y ago

Why does text rendering in svg elements always look slightly off? As in, I can tell that this website isn't native. The same thing happens with Flutter Web sites which I believe uses a similar idea of render many things with canvas/svg.

danielvaughn 4y ago
Probably because there hasn't been a ton of browser-level work on their SVG engine, as opposed to CSS rendering at least. Like the SVG2 spec has been lingering for years. Personally I'd love to see more activity there - SVG is awesome and it has more potential than is currently being utilized (IMO).
jancsika 4y ago
> Why does text rendering in svg elements always look slightly off? The rendering of text is pixel exact between HTML and SVG in every modern browser I've tested with. What you might be noticing is the distance between consecutive lines of text. HTML can flow text in a rectangle and automatically handle whatever inter-line settings were given in CSS (or the browser default). SVG cannot flow text-- the user has to specify an x,y for each line. My guess is that it's difficult to figure out how to replicate whatever the HTML algo is for interline spacing of text for arbitrary fonts. Additionally, the SVG library would need to manually handle word wrapping. Just with those two you can easily end up in the uncanny value of SVG, especially when the user starts zooming in or out.
- mhink 4y ago
  If you're confident that you'll always be dealing with a browser environment, this is a situation where embedding HTML in SVG via <foreignObject> is a pretty reasonable approach, IMO.
- gernb 4y ago
  what do you mean by "pixel exact". svg definitely renders differing amounts of pixels on my different devices. one with dpr 2.0, one with dpr 3.0, one with dpr 1.25

whylo 4y ago

From the FAQ: > Svija pages are fully-readable by screen readers, and you can add special text for each page in Svija Admin, visible only to screen readers. I tested the accessibility with a keyboard and screen reader. With a keyboard, when you press the tab key, focus should usually go left-to-right, top-to-bottom. On this page the first link you tab to is 'Request Access'. From there the tab key goes backwards, to FAQ, Examples etc, then up to Vibe, Blazing Speed etc. Then it jumps down to the footer, does the same reverse order, then jumps all over the place. The buttons in the main content to trigger animations aren't focussable at all, so aren't accessible without a mouse or touchscreen. I explored the page with NVDA (a free screen reader) and found a number of sections and links where what was read out was different to what was shown in screen. It looks like you have a hidden HTML DOM that's exposed to screen readers and I assume this is out of sync somehow with what's on screen? I also got a bunch of links that didn't appear on the screen at all. Exploring with the NVDA elements list (Insert+F7) shows a lot of junk in the Links list - links with text like 'id1584143858', 'UCmfF3YOMVyRcd0m-WpMUZ2g' etc. The Buttons list doesn't show the animation trigger buttons (because they're not marked up as buttons) and the Landmarks list is empty, meaning no easy way to jump to nav, header, footer etc. Browser zoom is completely broken. The page looks the same at 500% zoom as it does at 100%. Accessibility is important, and it's really disheartening when new page-building platforms like this pop up that clearly haven't been audited by an accessibility specialist or run past a disabled person who uses assisitve technology, especially when they specifically give the impression they're accessible as the FAQ answer does

AndrewSwift 4y ago
I agree wholeheartedly that accessibility is important, but I can't devote engineering resources to it until I have a product that's compelling in its own right. Right now I'm just trying to make an interesting platform to explore what's possible with SVG. Please believe me that when we are able to move forward, accessibility is very high on our priority list.
- deleted 4y ago
  [deleted]
- 4y ago

warent 4y ago

There's no way this is accessible right? Imagine someone with a screen reader opening this website and seeing nothing

deleted 4y ago
[deleted]
Tagbert 4y ago
SVG is XML, a screen reader would be able to access it.
- whylo 4y ago
  Just being XML doesn't make something accessible - I tested with a screen reader and found a lot of issues: https://news.ycombinator.com/item?id=33520364 https://news.ycombinator.com/item?id=33520364
  - Tagbert 4y ago
    I don’t doubt it, that kind of issue with navigation sequence is easy to mess up if you don’t prioritize it. I just meant that it being SVG is not inherently invisible to screen readers in the way that Flash was. It still means that they need to put some effort into organizing the navigation.
  - AndrewSwift 4y ago
    It's actually worse ;-) because the pages are constructed in Illustrator, the order of text is all messed up. Elements that are drawn first are higher in the SVG, but that only means that they're in back in Illustrator — not that they're higher on the page. It's pretty common to have a page where the header of the page is modified last, making it the last element in the SVG. Right now our planned solution will require server-side analysis of text size and placement. More long-term, we will use HTML for text and SVG for everything else. But that will require an editing program that doesn't yet exist.
    - 4y ago

zagrebian 4y ago

That web page looks… interesting without JavaScript https://imgur.com/ISKnuhT https://imgur.com/ISKnuhT

sibit 4y ago
Honestly doesn't look that different compared to a lot of "modern" oversized gridless webpages people peddle nowadays.
deleted 4y ago
[deleted]
pvg 4y ago
Please don't post shallow dismissals, especially of other people's work. https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html
- nr2x 4y ago
  I think it’s a fair point when it comes to accessibility as discussed in another comment.
  - pvg 4y ago
    It's about the form rather than the point. The point is fine.
- zagrebian 4y ago
  Please don’t gaslight me.
  - pvg 4y ago
    I prefer to think of it as gasenlightening.
nr2x 4y ago
To be fair so does any website made after 2000.

nashashmi 4y ago

This is like the successor to flash.

excitednumber 4y ago
https://upload.wikimedia.org/wikipedia/en/8/83/Strong_Bad.png https://upload.wikimedia.org/wikipedia/en/8/83/Strong_Bad.pn...
sandreas 4y ago
Hehe, yeah forget wasm, let's all use SVG :-) I doubt that flash will ever get "replaced", not even https://ruffle.rs/ https://ruffle.rs/ is feature complete.
- 1attice 4y ago
  I imagine wasm and all-svg pair really well.
  - AndrewSwift 4y ago
    If all goes well we'll be using WASM to produce our own SVG/HTML hybrid pages in a couple of years ;-)
AndrewSwift 4y ago
That's true. I used to build Flash websites and I started this project because I couldn't see myself building HTML/CSS for the rest of my life. Although there were many horrible Flash websites there were some really glorious ones too. And if I can pursue this project using mainstream, standards compliant technology, I can replicate some of the good things without the exclusive, resource-heavy player that was needed for Flash.
adamredwoods 4y ago
GreenSock used to be a Flash library! https://greensock.com/gsap/ https://greensock.com/gsap/

ericmcer 4y ago

This is sick but replacing html elements with svg is going to be a huge tangled mess and you will be playing catchup forever. Look at huge companies with teams of engineers constantly trying to make sure their browsers render all html elements to spec. You are going to need to do the same with svg or users will get frustrated. Maybe figure out a subset or a specific functionality that html elements struggle with but svg excels at, or present this as an alternative to a traditional webpage (like a page specifically for interacting with animations or playing a game or something). As far as building websites using only svg instead of html elements, that is a crazy lift to attempt.

AndrewSwift 4y ago
One of the things I like about SVG is that it's the same everywhere. You can look at our site on any major browser and it's exactly the same down to the pixel. Sure there are some rough edges — this is a proof of concept. Long term, I would like to create an editing program that combines the best of SVG and HTML, because there are obviously many places where HTML offers a lot more. That will be a huge project that will require funding, so right now I'm seeing how far I can push SVG by itself.
- xtian 4y ago
  For the common use-cases, SVGs do render consistently across browsers, but there are differences in feature support and rendering behavior outside of those. refX/refY is one example of this. These attributes were added to the SVG spec in 2015 and didn’t have support in all major browsers until a few weeks ago.
- danielheath 4y ago
  Until you start using responsive design in your SVGs, since it supports CSS with media queries :)
  - AndrewSwift 4y ago
    Our plan is not to do responsive design — Svija is really meant for designers, and for any content that requires real design, there will need to be separate versions for mobile and desktop anyway. Part of what's fun about Svija is that you can design content very rapidly, since the page is an exact reflection of the Illustrator file. I suspect that introducing responsive aspects would break that experience. However, we will be producing a page editor at some point in the future and when that day arrives we'll be looking into how best to handle these issues. Right now, with Illustrator as an editor, it's just not possible. Svija works by sending the smallest configured page (the mobile version) for the first request then checking the browser. If it's a bigger window, then the page is reloaded and only the correct version is sent for any future requests. I want to be clear that I am not saying that all sites should be built this way — Svija is an experiment to see if this makes sense.

nulld3v 4y ago

Unfortunately, this is definitely not "responsive". It's effectively just displaying an image and then scaling it to fit as you resize your browser. - It doesn't work properly if I resize the page after the page loads. E.g. if I load the page and then scale the browser window, all it does is make everything super small. It kind of works again after I refresh the page though. - It only has a couple of scaling breakpoints. E.g. If I try to have the page take up half the screen while I do something else on the other half, the page's font becomes absolutely tiny. It also becomes unusably large on widescreens. - Zooming does nothing As far as I'm aware, the last two problems are not easily solvable when using absolute positioning like Svija does.

deleted 4y ago
[deleted]
marginalia_nu 4y ago
Why does it have to be responsive?
- nulld3v 4y ago
  It doesn't, but if it isn't, then it shouldn't claim to be responsive. Being responsive is nice for usability because then the site can adapt to any screen/window size. However, in my opinion, it is also fine if the site can adapt to the most common screen/window sizes. Right now I see you have two artboards in the illustrator file, one for mobile and one for desktop. I think you should at least have another two for half-desktop and tablet. Widescreen should be considered too but for that you can just center the desktop artboard on the page. I'm not sure what to do regarding zoom though. Ideally it would allow you to change the size of the content while still ensuring the content fits on the page so you don't have to scroll horizontally. However, I don't think that's achievable in this case without making artboards for each zoom level. I guess you could just do zoom and pan?
  - nulld3v 4y ago
    Whoops, for some reason thought you were OP. Please s/you/they.

airstrike 4y ago

So many comments about how this is missing feature X or Y, isn't responsive, or isn't accessible... It would be nice to have people focus on its achievements rather than its pitfalls, unless the author has claimed it is a built-in replacement for HTML/CSS (which I don't think they did) Rome wasn't built in a day. Not everything can solve all of the problems at the same time. Not everyone has unlimited time and resources. Is it not laudable to keep pushing the envelope of what's possible and experiment creatively? Creating is really hard, destroying is alluringly easy.

AndrewSwift 4y ago
Thank you. I really poured my heart and soul into this project, and I think that the idea of creating animation by naming objects in a graphical interface has a lot of potential. It's obviously a prototype — I've been building websites since 1995 and believe me, I have a long list of missing features and capabilites that need to be added in.
- ghostbrainalpha 4y ago
  I've been building websites for about the same amount of time, and have never done JS animations and stayed away from GreenSock because I was scared of it, even though I was always curious. This is the first time I've felt like the effort to learn and make something cool would be worth it. Thank you!
  - AndrewSwift 4y ago
    Greensock is really great. It's pretty easy to use if you know a little JS, and it's very powerful. And, their support resources are top notch — very important for a tool that powerful.
deleted 4y ago
[deleted]
pvg 4y ago
These sorts of meta comments end up being just noise because the discussion changes over time. If you want to move the thread in a direction you think is better, be/write the change/comment you want to see in the world/thread.

ouija 4y ago

Just some test feedback: On my phone I have to scroll horizontally to read the text on the website. A part is always cut off. (Same problem on the linked example sites.)

AndrewSwift 4y ago
Are you on Android or iPhone? Which model? Which browser? I assume you are using the phone in portrait mode. This seems like an actual bug and I would like to try to reproduce it if possible. If you're willing you can email me at andy@svija.c_m

teddyh 4y ago

I’d honestly prefer an inline PDF. At least then I would probably be able to print it. This thing has all the drawbacks of a Flash-only site, except instead of just requiring a browser plugin, it requires Google Chrome to browse (I found multiple things which did not work in Firefox). The Web was created to have many levels of fallback rendering; “alt” attributes on images, <noscript> tags, font lists in CSS, etc., not to mention the large number of semantic tags not only present in the original HTML, but kept and increased in HTML5. This thing burns all that to the ground and establishes a new lowest acceptable level of web browser (and user able to view it). I mean, don’t get me wrong: this thing is cool and all, and I, too, have experimented with SVG web pages. But this is not making the web any better.

deleted 4y ago
[deleted]
nashashmi 4y ago
JPGs/PNGs are not making the web any better either. We still use them. SVGs are slightly better. They have readable content and don't pixelate. Plus they react. Reminds me of the dreamweaver slicer days.
- teddyh 4y ago
  If you made an entire web page be a JPEG or PNG image with Javascript to handle clicks, I would not like that, either.
  - AndrewSwift 4y ago
    If it was JPG or PNG, you could not select the text, embed links, or reuse parts of the page. And nobody could copy the source code to make the web a better place. When someone says that SVG is just a big image — well, that is not always the case. We have gone to great lengths to preserve text as text, to preserve images as images, and to use regular links. That is why we require Adobe Illustrator — it's the only SVG-capable editor that allows for real text and images. If you look at the source for a Svija page, it's a mess — but it does look like web page source.

tylerfoster 4y ago

And in a Flash, Shockwave is back :) This approach is going to have a lot of same accessibility issue.

deleted 4y ago
[deleted]

mNovak 4y ago

Personally, I think this is incredibly impressive! It feels much more like reading a magazine than a fixed info-port. Given, there's a time and place for both, but it's always nice to remember the web can be about creative expression.

AndrewSwift 4y ago
Thank you so much.

genezeta 4y ago

Just so you know: The "What it does" section, with the buttons "Movement", "Rotation", etc. The behaviour of those buttons is not very intuitive. press and hold is hardly the first action someone thinks of when seeing those buttons. Instead they'll click them. They'll see some weird small movement in the corresponding square, if anything (In the last 2, nothing happens if you just click). What's more, in the following section "No programming", the example shown says explicitly "click here" and explains that the blue rectangle "will be rotated 35º clockwise when the user clicks the trigger". "clicks" is even bolded. And yet, if you simply click it, it will only rotate a few degrees and return back instantly. Again, you need to press and hold for it to rotate completely. I'd suggest either changing the wording or adding an explanation to tell the user to press and hold, or changing the behaviour of the examples to actually trigger on click.

AndrewSwift 4y ago
I actually cheated a bit — you are right that it's not clicking, it's pressing. I tried various things, and this felt the most fun. You obviously feel differently. The "cheat text" that says how it works is just meant to give a general idea. Most people would say they "clicked" the button, whether they were talking about mousedown, mouseup, long press etc. The actual commands are slightly more complex — but this page is not the place to get into the details of what's a mousedown, mouseup, click, press etc.
- genezeta 4y ago
  Ok. But I didn't mean that as a discussion on what is a click or a mousedown, or what is fun. That's your decision, of course. What I meant is that most people will just click and not see the action triggered as expected. Some may then try long pressing, but many won't. The result being that a large number of people won't get the expected impression from the demo and may even think that it's not working correctly.
  - AndrewSwift 4y ago
    I understood that — my answer was a bit clumsy. The page doesn't actually suggest that you click on the buttons — they're just buttons (except for one, where it says "click here"). To me it seemed natural to hold down the button until the effect finished, and now I'm wondering if it's a difference between trackpad and mouse users. I use a trackpad, and it's a relatively slow operation to click. I don't have a mouse handy, but it seems like it would be much quicker. I will ask some of our testers what they think.

ruuda 4y ago

I was hoping this was something interactive using only svg. For example, one can do interactive charts with moving tooltips and a vertical cursor etc. fully in svg, using only hover states. (I thought Pygal [1] did this, but now that I check it again, it seems to require javascript for the tooltips.) This page is definitely not svg-only though, there is a lot of javascript on the page, and without javascript enabled I only see some curved shapes, and blurry things scroll by when I scroll. [1]: https://www.pygal.org/en/stable/documentation/first_steps.html https://www.pygal.org/en/stable/documentation/first_steps.ht...

deleted 4y ago
[deleted]
ruuda 4y ago
Here’s an example of what I mean, an interactive svg-only graph: https://gist.githubusercontent.com/ruuda/b84e94c3394f740d05bc803565a5cff3/raw/d2d25ae8e616eb13743e5c7ef0f227c9ccdd47e8/cpu_time.svg https://gist.githubusercontent.com/ruuda/b84e94c3394f740d05b...
AndrewSwift 4y ago
I would love to add interactivity, and there are also a lot of SVG effects that we haven't even touched. I need to clean up the animation programming and make it more straightforward, then I'll be able to get into that stuff. By SVG-only, I meant that there is no HTML. It also uses NginX, bash scripting, CSS, and Django ;-)

thebeastie 4y ago

Does it support lighting effects?

AndrewSwift 4y ago
It does not. Right now, Svija only supports effects that can be created within Adobe Illustrator. From what I have seen, these kinds of effects are easy to reproduce with regular Illustrator effects. It might be interesting in more advanced animation to change the lighting with other movement.

webmobdev 4y ago

It's fantastic! Just wish it could be used with open source editors like Inkscape or Krita, instead of AI.

AndrewSwift 4y ago
We would love that. The problem is that only Illustrator leaves text as text and images as images — all the others except Inkscape convert text and images into data that's no longer searchable. With Inkscape, the issue is that AFAIK it's not fully scriptable, making it complicated to use with Svija, and there is not a big user base (I've tried unsuccessfully to get real numbers, so I'm judging by participation in SVG forums, things like that).

Ptchd 4y ago

The text is not SVG...

AndrewSwift 4y ago
It is SVG — it's in <tspan> elements: <tspan class="stVibe-CP1"> lets you take any element or </tspan>

markisus 4y ago

Curious if anyone actually agrees with the supposed benefits of scroll hijacking. I find it jarring and always hate this effect when I come across it. > Scroll canceling enables you to animate objects that don't scroll with the page.The event is locked to the vertical scroll position, but the animation doesn't scroll vertically.It's enjoyable for the user and gives them a sense of control over their experience — always a way to keep your visitors interested. As you can see, it's a lot of fun — and we've only scratched the surface!

chii 4y ago
it's acceptable to scroll jack if the site curates that experience specifically for a specific purpose that the user would enjoy. It's not really good for a general, informational website.
- AndrewSwift 4y ago
  I agree, and in fact I only added this feature because a client requested it ;-) but I'm glad it did because it can be fun if it's done right. It can be very user-hostile, and reminds me of criticisms of Flash. I obviously can't control what our users will do, but my own guiding principle is that the user should always feel in absolute control of the page. I've been to so many sites where there's essentially a small movie that you scrub through by scrolling, and it makes it impossible to navigate normally or jump to the content you want.
- ChymeraXYZ 4y ago
  I have personally not seen one single case where the website managed to do that. Ever.

mixmastamyk 4y ago

Woah, locked up my computer like it hasn't in about ten years. Luckily had sshd running, but still couldn't get it to do much. Had to resort to magic sysreq keys to sync and reboot safely.

AndrewSwift 4y ago
Would you be willing to share which computer, Linux version and browser you are using? In general we have not had any issues like this. If I had to guess it would say that it is the Vibe and Home pages that cause problems because they have more animation than the other pages (frequent interrupts). Any info would be great.
- mixmastamyk 4y ago
  Linux Mint 21, latest Firefox, 12th gen intel gfx. I’d guess it was the gfx driver as this shouldn’t happen no matter what page is doing.
  - ChuckNorris89 4y ago
    Intel 12th gen is probably too "fresh" for the kernel and drivers of Linux Mint 21.
    - deleted 4y ago
      [deleted]
  - AndrewSwift 4y ago
    Thanks for the info. Sorry for crashing your computer.

markmiro 4y ago

What I love about this is how the design looks different from what you'd get if you designed a site in a more common way. Every tool has different affordances. And I love that you can see that in the site. It's immediately obvious that something about the creation of the website is unique

AndrewSwift 4y ago
Thanks for taking the time to visit!

dusted 4y ago

I kinda love how these generally give off a early 2000s Flash site vibe (in a good way, Flash, dear flash, how I miss the aesthetic, creative freedom, lightheartedness that you brought to the interwebbes)

AndrewSwift 4y ago
Thanks, I feel the same way.