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

31–40 of 200 posts

Re: Where are all the animated SVGs?

#31

Post by pcmaffey »

felixfbecker wrote: post #20
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…

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.

As the link says, deprecation has been suspended for a long time now. SMIL support is here to stay.

Re: Where are all the animated SVGs?

#32

Post by dekhn »

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 example, I wanted to make an animation of a robot that assembled burgers where burger components dropped down a hopper, the robot moved its arms around (kinematics) to assemble components, a conveyor belt to convey burgers, etc.

I ended up using SVG Animations. To get anything done, I ended up on 3-4 pages where the designers who implemented the Animation standard show some examples and a few sparse reference docs. I'm not completely unhappy with the results (many kids at maker faire found the animation enjoyable) but it still feels like the web is missing a really good graphics/view framework like https://doc.qt.io/qt-5/graphicsview.html

The graphics view framework is very performant, provides a lot of very nice features "for free", and can make extremely sophisticated applications. It's well documented, but of course is not a web app (some days I wonder what would happen if people did full Qt-on-WASM with a browser window rendering context).

Re: Where are all the animated SVGs?

#33

Post by mac-chaffee »

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…

> For maximum styling control, SVGs must be inlined

This was a real sticking point for me since editing and version-controlling a standalone SVG file is easier. I've had success with using Javascript to inline SVGs: https://github.com/jonnyhaynes/inline-svg

Re: Where are all the animated SVGs?

#34

Post by gpderetta »

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…

No need to wonder: http//doc.qt.io/qt-5/wasm.html

Re: Where are all the animated SVGs?

#36

Post by ihuman »

Does the app do anything besides let you edit the colors, stroke, and speed? The blog post made it sound like it would make creating animations from scratch easier, but all I see is library of pre-made animations. If it can be used to make new animated icons, then the main page does a bad job of showing that.

Re: Where are all the animated SVGs?

#37

Post by jazzyjackson »

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…

> You cannot modify most attributes via CSS if they're loaded as an image.

You can't modify the attributes with CSS outside of the IMG, but CSS embedded in the SVG still works.

I use SVGator to create animated SVG and it exports an svg file with embedded animation via css animation / transform, they work great as

Re: Where are all the animated SVGs?

#38

Post by vbezhenar »

_JC_Denton wrote: post #7
carlg wrote: 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.

Totally agreed. The author isn’t wrong about the workflow issues around svgs, but icons are not usually animated for good reason. The human eye is very sensitive to motion. It can be a fun thing to add to loading screens (the gusto pig, for example), but icons are designed to live on a page for a long time and only take our attention when we are actively looking for them. Motion is not good for this purpose.

What about progress overlay icon? It should be animated. Or something like downloading a file. If icon represents a work in progress, it's a good idea to make it animated. Of course animation must not distract too much.

Re: Where are all the animated SVGs?

#39

Post by jazzyjackson »

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.

This doesn't match my experience but maybe I'm in a bubble: for open source design and fabrication work, svg is basically as standard as pdf, I'll often convert pdfs to svgs to extract vector art and send it to another process, including 3D mesh editors that can extrude from svg files.

The editor I install on every machine and teach other people to use is Inkscape. The learning curve really isn't that bad, I've seen many kids really take off with it.

Re: Where are all the animated SVGs?

#40

Post by markdown »

> This process reminds me of web design in the 2000s when Photoshop was king.

~~Cries in Adobe Fireworks~~

I always wondered why Adobe Fireworks, which was a hundred times better than PS for web design, never got traction. I mean this was the time of web 2.0 gradients and rounded corner gel buttons and people were making this stuff with freaking PS. Why? Adobe Fireworks could do vector graphics wonderfully.

Post reply on HN