SVG is a widely-deployed royalty-free graphics format developed and maintained by the W3C SVG Working Group. It is a language for describing 2D-graphics and graphical applications in XML.
This post provides an introduction to the cool effects you can produce with filter effects and animation.
The most recent browser versions support most of SVG 1.1.
SVG allows for three main types of graphic objects:
- Vector graphic shapes (for example, paths that consist of straight lines and curves).
I wasn’t able to even lightly cover everything about SVG in this Introduction. There are a few more items you should know about:
A filter effect consists of a series of graphics operations that are applied to a given source graphic to produce a modified graphical result. The result of the filter effect is rendered to the target device instead of the original source graphic.
There are 16 different filter primitives. They enable effects ranging from providing light sources to applying matrix transformations to adding a Gaussian blur and much more.
One example, drop shadows cannot be created reasonably with a combination of gradients. Filters are SVG’s mechanism to allow to create sophisticated effects.
Here’s a quick example.
But you can do so much more with filters, including chaining them.
For more information on building Filters, see Filter Effects in the SVG Spec.
Try the SVG Filter Effects demo on the IE Test Drive site.
Declarative animation, meaning animation that is defined in SVG elements, does not yet work in IE-10 nor in Firefox. Instead, you will need to use script-based animation.
Script-based animation is actually relatively straightforward if you understand the basics of traditional “cartoon” animation. Animation, as you probably know, is simply a series of still images, each of which is changed incrementally, shown one right after another in quick succession:
MSDN provides three articles that show how you can use SVG Animation to develop game-like interactions.
Sample code is available in the DevDays GitHub repository. See https://github.com/devdays/html5-tutorials