SVG - XML based vector graphics to replace GIFs and PNGs

While doing UI design I faced problems with animated spinners, which I created in GIF format. One problem is I have to place spinning images on top of differently colored tiles, on various colors, which I cannot control. And second is the tiles are scalable, and the animated GIFs should scale as well. But they don't.

These issues though can be addressed by SVG format, which is supported by all major browsers except Internet Explorer (of course). IE doesn't understand animation in SVG.

(Note: if the SVG graphics doesn't work on this page as described, or for any other reason, you can visit a standalone demo page. On that demo page instead of <embed> tag I use <img>, which in the case of simple SVG animation works exactly the same. However to render it properly in Blogger posts I have to use either <embed> or <object> tags.)

So, here is the problem. Animation:

Notice rough edges, and scaling quality loss on the last tile:

Ideal scenario (rare in the real world): white background, no need to scale, no spinning speed control, no color change:

And here is the the solution. The same tiles with the spinners in SVG format:

The same SVG scaled from 34 pixels above to 500 pixels (show):

Well, with one compatibility issue: animation doesn't work in any version of Internet Explorer. Let's see what else we can do with SVG format.

SVG: Animation (Spinners)

Moving circles along the path

Changing color of circles

Together: Moving circles along the path while changing their colors

Rotating circle with gradient transparency

Full control over the code is easy. Direction of rotation, speed, color... List can go on.

SVG: Interactivity - Mouse and Keyboard Events

Mouseover (achieved by CSS inside of SVG file)

Mouse Click. For keyboard events click on the button first, then press Space. (CSS and scripting inside of SVG file)

SVG: Filters

Blur

Dropshadow

All the non-animated SVG above are rendered as designed in all major browsers today. There are issues with animation in Firefox and Opera, but workarounds are possible. All css styling and scripting are inside of SVG files. SVG graphics was created in Adobe Illustrator, and then edited in text editor.

This post is the part of the research of replacing GIF and PNG with SVG graphics in our desktop Java-based applications using Apache Batik SVG Toolkit.

I hope this example page with some SVG highlights helps you in your projects. Let me know if I missed something important.