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.
With SVG, you can use XML and JavaScript to create web graphics that respond to user actions with sophisticated effects such as highlighting, tool tips, audio, and animation.
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).
- Images.
- Text.
I wasn’t able to even lightly cover everything about SVG in this Introduction. There are a few more items you should know about:
Filter Effects
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.
Then see the Inkscape Tutorial Blog topics on Filters and SVG Filter Effects in IE10.
Try the SVG Filter Effects demo on the IE Test Drive site.
Animation
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.
See:
Sample Code
Sample code is available in the DevDays GitHub repository. See https://github.com/devdays/html5-tutorials
AzureDays 
