3 ms·

Creating Cel Animations with SVG

35 points by spking 11y ago

foob 11y ago
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 11y ago
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 11y ago
  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.
- Gigablah 11y ago
  "Their site is jammed trying to serve huge SVG files" False statement. I looked at the page source code and the network requests; all the SVG illustrations used in the article are inlined, and the entire page is 154kb gzipped. That's not "huge" by any means. The real reason the site is "jammed" is due to all the advertisements (pngs, gifs) and tracking widgets.
rw2 11y ago
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.
gelatocar 11y ago
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.

35 points by spking 11y ago

foob 11y ago

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 11y ago

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 11y ago
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.
Gigablah 11y ago
"Their site is jammed trying to serve huge SVG files" False statement. I looked at the page source code and the network requests; all the SVG illustrations used in the article are inlined, and the entire page is 154kb gzipped. That's not "huge" by any means. The real reason the site is "jammed" is due to all the advertisements (pngs, gifs) and tracking widgets.

rw2 11y ago

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.

gelatocar 11y ago

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.