Live data from Hacker News

Where are all the animated SVGs?

getmotion.io

11–20 of 200 posts

Re: Where are all the animated SVGs?

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

> SVGs in general seem to have had quite a poor adoption rate

I don't know. I'm not sure what the real numbers are but in my experience SVGs are pretty commonly used for app and web icons because they are easily "themeable" (color changes etc.)

Re: Where are all the animated SVGs?

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

One big problem with SVG is that the specification is so large that everyone implements a subset, so interoperability suffers.

Lots of XML-based standards of a similar age seem to have suffered from this. There was an idea that there'd be a standard for everything, and each XML-based standard would refer to others when it made sense rather than re-inventing the wheel. But too often the result was that in order to implement standard A fully you needed to implement all of B and C and D which your users didn't really care about, so in practice you ended up with an undocumented de-facto usable subset.

(Though for SVG I think the worst problem is that they didn't specify a fixed subset of CSS that should be supported, which isn't an XML-world thing.)

Re: Where are all the animated SVGs?

#14
post #11
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.

> SVGs in general seem to have had quite a poor adoption rate I don't know. I'm not sure what the real numbers are but in my experience SVGs are pretty commonly used for app and web icons because they are easily "themeable" (color changes etc.)

A lot of designers I know just keep a raw layered image and swap out themeing on a per-case basis. SVGs are easier to dynamically theme, but usually any theme variants get run by a designer anyways that will tweak color tones for the specific usage as needed.

Just to be clear though - I love SVGs and want them to get more momentum solely on the basis that they're just a way better way to store abstract line art and can yield proper image scaling... I just think a lot of the technical advantages we tend to think of aren't really that valued by designers and get lost in needing to be done manually anyways.

Re: Where are all the animated SVGs?

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

There are plenty of people who do know how to create good SVGs, but my first thought when I read the title was: maybe the people who know how, also know it's better not to.

Re: Where are all the animated SVGs?

#16
post #2

I, for one, don't want this. At all. Taking a look at my screen right now, there are probably close to a hundred or so icons in various applications visible on my desktop. If all these icons were wiggling and dancing, distracting me in my peripheral vision, it would be infuriating. I already had to disable animation in Slack due to the constant barrage of animated emojis. Let's not just do this because we can.

I'd like to think we learned from all the horrible animated gifs in the past.

Re: Where are all the animated SVGs?

#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 SVGs in an environment that has both web and emailed pieces can mean duplicate assets.

* For maximum styling control, SVGs must be inlined. You cannot modify most attributes via CSS if they're loaded as an image.

And one nit about the linked tool from this post, Motion.app is a bad application name choice for OS X. It conflicts with Apple's Motion.app, which more than a few designers are likely to have.

Re: Where are all the animated SVGs?

#18
post #2

I, for one, don't want this. At all. Taking a look at my screen right now, there are probably close to a hundred or so icons in various applications visible on my desktop. If all these icons were wiggling and dancing, distracting me in my peripheral vision, it would be infuriating. I already had to disable animation in Slack due to the constant barrage of animated emojis. Let's not just do this because we can.

We could compromise and just allow blinking text. /s

Re: Where are all the animated SVGs?

#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 effort. Although it's high fidelity, the reality is, unlike film or tv, software is ever changing. Styles change and fads come and go. Ultimately the cost is never justified.

Re: Where are all the animated SVGs?

#20

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…

SMIL animations are also obsolete: https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animati... The "proper" way are supposed to be CSS animations, but they are not as powerful yet.
Post reply on HN