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

41–50 of 200 posts

Re: Where are all the animated SVGs?

#41

Post by willis936 »

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.

The killer app for animated svgs is not icons. It's graphics that are meant to be given attention to convey something important. We do that with raster graphics and it works okay, but low resolution rasters of yesteryear look bad.

Re: Where are all the animated SVGs?

#43

Post by outworlder »

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.

They don't have to be animating all the time. However, animations can convey events better than alternatives (popups and the like).

Re: Where are all the animated SVGs?

#44

Post by arianestrasse »

Looks cool and all, I was actually pretty sold the moment you started to talk about the editor. However, I still don't know what your editor actually does.

You ended the article abruptly and maybe expect people to click the link and go to your website to learn more? A bit more introduction is needed for your call-to-action to work. You can't just say "I made an editor" without at least listing the key features.

Other than that, good luck.

Re: Where are all the animated SVGs?

#45

Post by jansan »

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 can inline external SVG files with SVG injection. Works pretty well and almost feels like working with normal images. Here is an open source SVG injector: https://github.com/iconfu/svg-inject

Re: Where are all the animated SVGs?

#46

Post by sramsay »

My collaborator and I create animation art with SVG (he is the animator, and I'm the composer/video editor, though we work together on the overall concept).

Some samples of our work here: https://vimeo.com/user1776782

Thing is, he doesn't use the animation facilities of SVG, because he can't get it to do the extremely complex things he wants to do with it (honestly, his XML/XSLT/SVG chops are not really in question here). Instead, he has a (gigantic) system that renders individual frames using XSLT, and then stitches it together with ffmpeg. His SVG files are already constantly pushing up against the abilities of tools like Batik, and for XSLT, there's really only one fully compliant tool in town (Saxon).

I find it kind of amazing that there aren't better tools out there for SVG -- and frankly, for XML. The fast tools (imagemagick, rsvg, libxslt) aren't compliant, and the compliant ones aren't fast (they're all in Java and very resource intensive).

Despite the fact that all of this uses open standards, it can sometimes feel as if we're working in the next Flash.

Re: Where are all the animated SVGs?

#47

Post by jazzyjackson »

Back in 2013 the game magazine Polygon created really stunning illuminations in their Playstation 4 and Xbox One reviews. It's what got my interested in the more advanced uses of SVG and CSS -- it uses a clever trick where it uses the bezier curves as paths that are then filled in by offsetting the stroke fill... here it is.

  stroke-dasharray: 422px, 422px;
  stroke-dashoffset: 0px;
  fill: rgba(255, 255, 255, 0.333);
https://www.polygon.com/a/ps4-review/controller

https://www.polygon.com/a/xbox-one-review#console

Re: Where are all the animated SVGs?

#48

Post by gugagore »

markdown wrote: post #40

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

What did the workflow of using photoshop even look like? I might be misinterpreting "web design". It means developing a design to be consumed by a computer, and also developing a design to be consumed by a web developer (like a mock-up design).

Re: Where are all the animated SVGs?

#49

Post by marpstar »

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…

The performance issues are what prevented me from using SMIL. A project I was working on called for an SVG animation that we also had to move on scroll (don't ask...). The animation was choppy and definitely got the fans spinning.

Swapping that out for the equivalent CSS animation and everything was smooth as butter. It's obvious that SMIL performance is not as important to the browser makers than CSS animation performance.

Re: Where are all the animated SVGs?

#50

Post by Jerry2 »

The lack of open-source animation tools is really concerning to me. I've been looking for a way to animate some text and graphics for a series of training presentations that I was making and I couldn't find anything suitable. Open source tools are either geared towards animation of cartoons or they're so rudimentary that they're not really valuable to invest the time into.

Anyone have any recommendations for animation tools? Something that works either on macOS or Linux? If only paid solutions exist, what's out there (besides After Effects)?

Post reply on HN