Inspired by experiments that Google does with it’s logo I came up with an idea to do something similar for my project.
The only problem is that different browsers support it in a different range (especially the more advanced elements). Also there is a number of ways to put the SVG into a page (static or animated). On the other hand apart of SVG there are other ways of doing vector graphics on the web. So knowing what kind of effect you want in the end is important. Hence, first a quick run-through the available options:
1. Create the image & embed in the webpage
1.1. HTML5 & canvas
1.2. SVG & XHTML tags (<svg> / <object>)
Create the image in a vector graphics app, export as SVG, open in text/html editor and just copy paste the SVG text to your XHTML document of choice! (Note: This is the option I personally use).
To my knowledge there are two standing out and most widely used frameworks for working with SVG:
- Raphaël – easier to start with and has lots of useful functions but sometimes a bit limited
- jQuery SVG plugin – less flashy, worse documentation but more flexibility
2. SVG Animation. (I skip HTML5 canvas because I didn’t use it , look here for info [link])
2.2.1 Code yourself all manually
2.2.2 Use dedicated frameworks (Raphaël/jQuery)
The cool part about dedicated frameworks is that they deliver tools for animations and transformations. Raphaël is very cool in this area because it gives more or less the capabilities that SMIL delivers. Very easy functions to get cool effects quite quickly. With jQuery SVG plugin is possible to use the native jQuery ‘animate’ function. Unfortunately that does not save that much effort as when using Raphaël (eg. no way to animate motion of object via Bezier paths unless you extend animate further yourself).
As mentioned before, I went into all this with the goal to create an animated logo. Here is the outcome of my work for Gi2MO project logo.
Note: Currently the animated logo I did only works in Google Chrome browser (and Safari too but not as good). In Firefox and IE it does not work (yet ;p).