
Creating Cel Animations with SVG - spking
http://www.smashingmagazine.com/2015/09/creating-cel-animations-with-svg/
======
foob
I wrote a little utility called svganimator [0] which is relevant to this. If
you're just in a hurry to get something going it can be used to combine a set
of static SVG files into one animated SVG file in the same way that you might
combine images to create a GIF. It also has an experimental mode where it
tries to smoothly interpolate between frames and store things more
efficiently. This tends to work really well if you're using programmatically
generated SVG files. We used it to generate all of the animations for our
article on Swype Optimization [1] and people sent us a lot of positive
feedback on them!

[0]
[https://github.com/sangaline/svganimator](https://github.com/sangaline/svganimator)

[1]
[http://sangaline.com/blog/optimizing_for_swype/](http://sangaline.com/blog/optimizing_for_swype/)

------
Animats
Those who do not know how Flash works are condemned to repeat it. Badly. _This
is exactly what Flash is for._ There used to be a whole design style of cel
animations done with Flash. Nobody bothers any more because everybody now has
enough bandwidth to load video.

Their site is jammed trying to serve huge SVG files. Flash did that better;
the animation could start before the entire file had been read.

~~~
joshribakoff
I don't understand your comment. Flash is closed source while SVG is an open
standard. Flash was a compiled .swf file which could contain audio, scripting,
raster images, etc... While SVG is not a compiled format, and only contains
vector. They are not exactly the same thing, far from it. One of the biggest
differences is that one is an open standard & the other is a closed source
product from a company.

You also say that flash is better than SVG because it doesn't "jam" sites
loading. If I recall, you could choose wether to implement a "preloader", or
endure possible buffering. The same would be true of SVG, you could
incrementally enhance your page as it loads, or choose to design it such that
the page blocks until all SVG is loaded. With both technologies, you have the
choice.

SVG is being used by apps like Google documents, and browsers are dropping
support for Flash. I have used both Flash & SVG and I think Flash is "Bad",
but SVG is "good"... SVG can interact with CSS, HTML, and Javascript... all
through open source APIs, while Flash had limited interaction with HTML &
Javascript only, through closed source APIs.

------
gelatocar
It is nitpicking but this is an incorrect use of the term "cel". A cel is a
transparent sheet that is used in layers to make up a frame. The article talks
about cels as if they are frames. Cels are useful because it allows picture
elements like backgrounds to remain unchanged frame to frame.

edit: nm, looks like they address this later on in the article.

------
rw2
I would love to see a vector based lossless format for Anime. There is no
reason to pass a large 4k file for animations and if reduced to vectors, you
can scale up infinitely with great resolution.

