High fashion today in the field of web design is to show that we can take advantage of the latest Webtechs by loading CSS3 effects and javascript, based on html5 .
Hence the parallax effects, horizontal sites, puzzles, games, etc. … with canvas beacons… and I forget, often bringing only 2 minutes of distraction, each visitor subculturing and improving, when he can, the ideas of others.
The arrival of SVG tag is also important because it « forced » to have the latest browsers supporting this format natively ( in the case of IE9). We can interact with the elements included in this tag using javascript (Raphael.js) but in this case we must consider the SVG as part of the site, a frame not a picture.
And this is what bothers me-
In fact we can even assign a CSS3 background to the tag-as well as <body>, so that one can decorate a vector image with a pixel image (photo) without making part of the SVG beacon.
You can also animate and render all interactive as in this example: http://www.netriver.co.uk/demo/animated-svg-background.html (thanx to http://davidsbigthoughts.blogspot.fr/)
I personally have a more affordable solution, I applied to this blog:
I call my SVG file containing SMIL animations by CSS! Such attributes are part of the image itself and are understood by a compatible browser: your wallpapers are moving 🙂 Warning: this does not work with javascript animations and you can’t interact with it . In the case of a browser that does not support SMIL you have to « think » your image as a fixed one. Of course you can think about doing the same by calling a .gif cinemagraph with CSS, but the weight will not be the same (!)
Ditto for CSS animations, if you do not have the software (expensive) good luck … Here my file weights only 10 K0 and 22 K0 for this example:
Nota: For those telling that it’s heavy looking at cpu loads I’ve got 2 Tips:
- You can stop it once by pushing “Esc” key
- Want to make it with flash? Hey let me know and show me something “universal” and lighter that you can stop whenever you want.