SVG – Soothing vivacious graphics

Back in year 2004, I got my hands on Sony K 320 mobile (it was my first mobile with nice headset). While going through the set of media that came preloaded with the set, I came across quite a few files which had .svg as extension. Being curious about what these files are, I opened it and to my astonishment I found the files were actually consisting of animating picture. Rather than mere GIF transitions which spins series of images, the animations felt real and it seemed like every pixel in the picture was programmed to do something interesting.

Back then to explore what options are available in the world of SVG (Scalable Vector Graphics), I did spend some time on blogs and posts. The hunt gave me basic information about what SVG files can be created and what goes inside the file. But soon after that, I somehow lost it till just recently when I was trying to do something different.

While all these years, I have been using most of the utilities/libraries which were created on top of SVG, I never took effort to look what is under the shadows. But in last few days, while I was exploring something, I realized that SVG could be better option and eventually my exploration revealing treasure hidden for years. The tools and libraries support for SVG has grown for all these years and now there is stronger ecosystem for SVG with HTML again getting stronger.

With applications like HICHARTS, Popoto and many more, the SVG’s popularity is growing day by day. SVG’s lightweight nature and easy to learn approach fabricated with animation support has made it ideal candidate for many applications.

While one can easily get hands on SVG using any text editors, there are tools like Adobe Illustrator (Commercial) and Inkscape (Freeware) which makes life easier while dealing with complex graphics. If there is need to draw graphics dynamically, a better options to use libraries like RaphaelJS, D3 (rich library for data driven documents) and Snap.svg.

And one more thing, these days people seems to comparing SVG with CSS3. But to remind you, what CSS3 has gained today has been present in SVG for years. Check what Dmitry Baranovskiy (creator of RaphaelJS) has to say about SVG – You don’t know SVG

While there are still some areas where CSS has upper hand, SVG surely outshines the areas it belongs. I will be exploring it more in coming days.

By Carbon Rider

Hi this is Yogesh, welcome to my world. Being passionate about learning new technologies and building frameworks, I end up spending most of my time in front of computer. But over last few months, I realised apart from being good coder and designer (Yes I am) I have something hidden in me. And thats called ART.

Leave a Reply