HTML5 Tutorial – SVG Introduction to Filter Effects, Animation

image_thumb1SVG 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.


Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

view raw

svg-filter.svg

hosted with ❤ by GitHub

image

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.


Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

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:

image

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