Sunday, January 12, 2014

SVG: Combining technologies for the purpose of art

SVG (Scalable Vector Graphics) is a vector image format which Adobe developed a long time ago for Illustrator. It then became a W3C Recommendation in 2001 as a markup language. It enables a lot of flexibility and ease of use for animations and shapes on the web without the need of plugins (I love repeating that).

The only drawback is all the implementation debates it leads to. Plus, the quality of rendering varies a bit on different browsers. Presently, Google Chrome and Opera are the best SVG renderers and implementers. But, unlike WebGL, SVG is not dependant of HTML5 canvas. It has its own width and height attributes in the namespace declaration. It means you can make a web application in .svg with JavaScript and HTML in the same file. See as an example.

As far as webdesigning goes, it can perfectly replace a CSS layout or at least you can use much less of it. Here is a photographer's site where I typed only nine lines of CSS.

You can draw your favourite program and export for the web easily. It is more practical when you want to do something complex. For relatively simple shapes, you can directly type in your text editor as there are some primitives built in just for you. The advantage of the last method is that it's easier to manipulate them for animation.

Here are some useful links: 

Demos of all sorts: 

Vector drawings with Inkscape:

One of the most famous Illustrator-like, but it's free:

An excellent book for starting with SVG. Easy and good didactive approach.

by Federico Strazzullo -