Inspired by experiments that Google does with it’s logo I came up with an idea to do something similar for my project.
The easy not-so-interactive solution is obviously an animated GIF but …easy is not the point with this experiment, learning SVG is š SVG is a vector format for publishing images on the web. The benefit of SVG is that it’s entire structure is embedded in HTML so every part of the image can be refereed to and manipulated like any other elements of HTML (e.g. with CSS, DHTML, Javascript and so on).
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
In comparison to SVG the way this works is that you have to write all the code for vector image yourself in Javascript (meaning no way to export image from vector graphics app like Inscape and insert into canvas to manipulate its DOM ).
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).
1.3 SVG & JavaScript frameworks
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
They both operate on SVG but there is one significant difference: RaphaĆ«l does not have the option to import SVG! So basically its like HTML5 canvas at the moment. You have to create (read: code in javascript) the entire image by hand. The benefit of RaphaĆ«l is that it has very cool functions for manipulating SVG (see 2. Animation). jQuery SVG plugin is able to dynamically insert SVG code so its a bit more flexible but it is much less developed also and you’ll need to implement a lot of things on your own.
2. SVG Animation. (I skip HTML5 canvas because I didn’t use it , look here for info [link])
2.1. SMIL
SMIL is a very cool and easy way to animate SVG. Unfortunately it has a big drawback, it’s not supported by Firefox at the moment (and even if its on the way before the ‘commoners’ switch to new version of FF it will take ages). Either way SMIL is really really easy to understand and simple. Animation is made by embedding special tags inside the SVG tree (like ‘animateMotion’, ‘transform’ and so on). Originally I did my own project in this but then had to switch to javascript because of the browser support & some limitations (eg. chrome/safari support SMIL but couldn’t get them to work with Sequences from SMIL 2.0 to manipulate delays between animations).
2.2. Javascript
2.2.1 Code yourself all manually
Since all elements of SVG tree can be accessed via javascript they can be also animated using setTimeout/setInterval. Obvious drawback of this method is that you have do code all calculations on your own. On the other hand, you can optimize and play around more. (Note: I have chosen this road.)
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).
Note: If you plan to use SMIL or code yourself with Javascript – this is a good resource with examples I used a lot when learning.
EXAMPLE
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).