Where are all the animated SVGs?

My question is, what is the best way to create a sort of 3d “ripple” wave outward from a button, expanding over a background as it spreads in circular wave?

Displacement Maps?

WebGL?

Animated SVG?

I want a hexagonal grid and displace it by an expanding circular wave in “3d” when a button is clicked.

Can anyone here do this? I need something that works on iOS safari as well (webgl seems not to)

Inkscape is so overwhelmingly popular for SVG illustrations on Wikimedia that they've seriously considered just using headless Inkscape as the standard SVG rendering backend, instead of rsvg.

Sure but D3 is a bit of a workaround. It can animate SVGs (well any DOM node) but doesn't create animated SVGs. By more or less requiring Javascript with a DOM implementation you're limiting D3's use case to browsers. Server side rendering becomes more tedious. D3 is a poor fit for something like an application dock where you don't necessarily want a whole HTML rendering engine.

Performance is definitely dependent on environment. For visualizations that use simple shapes like area and bar charts, force directed graphs, etc. SVG performance is pretty decent across the board. If you need to use complex shapes like for a cloropleth or globe, Safari chokes. I don't use Chrome anymore so I can't compare, but Firefox will happily render and animate a globe using relatively detailed (1:50m) data. With Safari you need to go out to 1:110m to get passable performance.

Let's not even get into Safari's atrocious font handling... ugh.

Icons designed to be small have less detail and often rely more on the general shape, sometimes exaggerating certain features of the icon to make them stand out. Large icons or images can be filled with lots of rich detail. Scaling up a small icon often makes it look barren and generally out of proportion, and scaling down large, highly detailed icons/images makes the icon "noisy" and loses the essence of the icon.

This does not only apply to vector icons, by the way. Most highly polished icon sets will have an icon for different sizes. For example, in Windows, zoom the desktop icons in/out and compare.

Once upon a time, there was an animation tool called Flash. It had a very simple interface, that focused largely on moving stuff around visually. Its timeline was easy to understand: one row for each separate object, with a keyframe that would store whatever changes you made. You could draw directly in it. You could import art from other programs and move that around. You could combine the two. Wanna do full, traditional animation? Flash could do it. Wanna do paper-doll stuff? Flash had you there, too.

Artists loved it. It got used for the web. it got used for games - it was really easy to animate some little critters moving around and start attaching behaviors to them, especially in Actionscript 2. It got used for animation. It's still being used for some animation - my former co-worker who's now heading the animation on Teen Titans Go used it to crank out a feature film alongside one of the last few seasons.

Then Apple killed it. The Flash plugin was a giant security hole, what with the animation files having no less than three possible types of code embedded in them. It didn't draw very efficiently, and it burned through battery like there was no battery. Apple didn't want any of these things on their brand new iPhone, and they captured enough of the market that "Flash" is now considered a dirty word.

Now we have SVG. Which you can animate via CSS. And we have people starting to try and make editors that can be used by non-programmers. But all of them seem to insist on exposing separate controls for every separate property, each with their own timelines hidden inside an object's timeline. After Effects is the model, and it's a slow, stiff, fiddly model versus Flash's ability to just lay down a keyframe and draw some stuff, or move a symbol around with a nice little free transform tool that lets you scale, rotate, and skew everything right there on the canvas.

You wanna make SVG attractive? You wanna see people playing with its potential? Go find some people who remember using Flash, who made cool animation and/or games, not programmers or designers. Get a copy of their favorite version running in a VM (me, I think it peaked at 5, I think TTG is currently on CC2015 [aka version 15]). Pay them to make a short animation, and watch how they use it, and make your editor able to act like that instead of like After Effects.

And then make it easy to export this stuff and put it on the web. One file to upload, please. One simple tag to dump into your HTML.

(But first check if Adobe Animate can export animations as SVG, because that's what Flash got renamed as once they had a working HTML5 exporter.)

(and also yes I am intimately aware of Flash's many flaws, don't bother listing them, I'm mostly glad to see it gone, but there were some things it did really well.)