Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Where are all the animated SVGs?

getmotion.io

Post reply on HN
Print view View original

141–150 of 200 posts

Re: Where are all the animated SVGs?

#141

Post by mirimir »

MayeulC wrote: post #87
rbritton wrote: post #17

I've recently done quite a bit of work with SVGs, including those with animations. Some observations: * Edge doesn't support SVG animation in the older engine, only the newer Chromium-based one. * Until recently, Chrome had a massive memory leak with SVG animations that loop if left up for several hours. * SVG animations often cause enough CPU load to spin up laptop fans. * There is no SVG support in email, so using…

> There is no SVG support in email, so using SVGs in an environment that has both web and emailed pieces can mean duplicate assets. FWIW, Thunderbirds displays svg sent as attachments inline at the bottom. Whatever you do, of course, do not break plaintext email. I only use plaintext emails.

Damn.

So I use Thunderbird, with no HTML, images or remote resources.

And there's a site that, every week, sends me this message:

> Please view this email in an HTML compatible email client.

Re: Where are all the animated SVGs?

#142

Post by pier25 »

mc3 wrote: post #62
crazygringo wrote: post #60

Please keep the animated SVG's away! Motion is extremely effective at drawing the eye's attention, and so should never be used unless that's the goal. In fact I can't think of a single good design reason to ever animate an icon except for loading/progress icons, which already are ubiquitous and generally don't need any dedicated animation tools since they're so simple and reusable. You don't ever want normal interfac…

I agree but with the cavaet that animated SVGs can be good for some special cases: * Loading indicator - from a UX perspective we are used to this so having a non-animated loading is weird. I think gmail used to do it but that was back in the mid 2000s. * Confirmation of a user action - if I have sent an email then a sound and/or animation can feel good. It is not necessary but sort of adds a magic to the application…

I agree, although otoh we’ve seen a ton of gratuitous motion all over mobile/desktop/web UIs which is totally irrelevant.

Hopefully this trend will pass much like the Photoshop layer effects (bevel emboss, drop shadow, etc) which were everywhere in the late 90s early 00s.

Re: Where are all the animated SVGs?

#143

Post by pier25 »

jarjoura wrote: post #19

> Creating animations is hard! This is one reason why many developers do not attempt it. You need to have a "design eye" or you need to study animation. People go to school for years to learn about animation and spend years refining their craft. This! On a project I was working on recently, animations cost around $10k per object. If we wanted to invest in a full experience it easily grew to a several million dollar e…

Unless you were doing pretty complex stuff $10k per animation is quite expensive. I’ve see full animation projects made with less than that.

Re: Where are all the animated SVGs?

#144

Post by pier25 »

dekhn wrote: post #32

I've wanted to use the web as a replacement for PyQt (and tkinter, going all the way back to ~1995). It's really been amazing how badly the web tracks what is possible (and easy!) in a good GUI toolkit. Every 3-5 years I go back and try to find out what is the minimal way to get HTML + JS + CSS to produce something that would be easy in PyQt, while also being fairly principled, standardized, and maintainable. For exa…

Something like Pixi?

https://www.pixijs.com/

Re: Where are all the animated SVGs?

#145

Post by ulrikrasmussen »

crazygringo wrote: post #60

Please keep the animated SVG's away! Motion is extremely effective at drawing the eye's attention, and so should never be used unless that's the goal. In fact I can't think of a single good design reason to ever animate an icon except for loading/progress icons, which already are ubiquitous and generally don't need any dedicated animation tools since they're so simple and reusable. You don't ever want normal interfac…

Regarding your extra note #1: even here, I think animation should be avoided like the plague. Animation to indicate the connection between UI elements is a design crutch which adds latency and makes for a sluggish experience for experienced users.

Re: Where are all the animated SVGs?

#146

Post by omegabravo »

Izkata wrote: post #74
Animats wrote: post #64

Earlier quoted context omitted.

Please keep the animated SVG's away! Yes. Now, from the people who brought you the tag, continuous junky animations. You can also do spinning logos in WebGL, but you shouldn't. The only legit use for this is when you want clicking on a button to indicate that something happened. If you click on a "send" button, and an envelope zips across the screen and disappears, it's OK. If you click on the "Buy" button, it would…

> (Remember "material design?" Whatever happened to that?) The new hotness is "neumorphism": https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf...

I'm not looking forward to this excessive padded future.

Re: Where are all the animated SVGs?

#148

Post by nailer »

cmroanirgo wrote: post #126
kulahan wrote: post #103

Earlier quoted context omitted.

Damn, I like the way that looks. I get why it's catching on! I think this could quickly go from "really awesome" to "super awful" pretty quickly if you didn't have a professional designer working on it, though. Overcrowding seems like it would be worse in this style than in others we've seen get popular over the years.

It seems to look a lot like win 95 to me, but rounded and blurred edges! (NW is lighter add SE is darker, & inverted logic when it's depressed) I recall a comment in some other HN thread the other day about how win 95 was the pinnacle of ux progression and how nothing seems to have really progressed since. I totally agree that it looks good, & could go crazy wrong, very easily.

Windows 95 had hard bevelled edges. Neumorphism has the opposite.

Re: Where are all the animated SVGs?

#149

Post by hnick »

munk-a wrote: post #4

SVGs in general seem to have had quite a poor adoption rate. Editors for them are fewer, paint can't open or edit them, and support for them is iffy with even google docs not supporting the format for importing an image.

Wordpress is a significant part of the internet (hobbyist and small business definitely) and it still blocks SVG by default due to security concerns because SVG images (like fonts) are essentially scripts/programs, not images.

There are various potential vulnerabilities due to this and you can sanitise images or use correct headers to mitigate the issues, but it's easier for many to just say no and sidestep the issue.

Re: Where are all the animated SVGs?

#150

Post by kllrnohj »

rbritton wrote: post #17

I've recently done quite a bit of work with SVGs, including those with animations. Some observations: * Edge doesn't support SVG animation in the older engine, only the newer Chromium-based one. * Until recently, Chrome had a massive memory leak with SVG animations that loop if left up for several hours. * SVG animations often cause enough CPU load to spin up laptop fans. * There is no SVG support in email, so using…

> SVG animations often cause enough CPU load to spin up laptop fans.

Yeah I really don't know why the article claimed animated SVGs are performant. They aren't. SVGs are incredibly slow to render, and asking them to animate is murder as a result. There's no acceleration for them at all, entirely CPU-rendered (slow) and then needs to be uploaded to the GPU for the rest of the otherwise GPU-rendered or at least GPU-composited scene (also slow).

Trying to do any of this on mobile, with extremely high resolutions, is going to absolutely tank performance.

Post reply on HN