It is somewhat sad to see that the Scalable Vector Graphics (SVG) format, despite its considerable age and maturity, has not yet gained too much popularity in the internet, with a lot of Adobe Flash all over instead. Here are some points you should know about it, so that maybe you consider taking a couple of hours to get acquainted with it one day.
- SVG is an open source vector graphics format.
- SVG supports most of what you'd expect from a 2D graphics language: cubic splines, bezier curves, gradients, nested matrix transformations, reusable symbols, etc.
- SVG is XML-based and rather straightforward. If you need a picture with a line and two circles, you write a <line> tag and two <circle> tags:
<svg xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="0" x2="100" y2="100" stroke-width="2" stroke="black"/> <circle cx="0" cy="0" r="50"/> <circle cx="100" cy="100" r="20" fill="red" stroke="black"/> </svg> - Most vector graphics editors can write SVG. For example, Inkscape is one rather usable open-source software piece.
- SVG supports Javascript. Basically, if you know HTML and Javascript, you are ready to write SVG by hand, because SVG is also just XML + Javascript. This provides considerable freedom of expression.
- SVG can be conveniently embedded into HTML webpages and is supported out-of-the-box by most modern browsers.
My personal interest towards SVG is related to the observation, that it seems very suitable for creating interactive data visualizations (charts, plots, graphs) right in the browser. And although the existing codebase devoted to these tasks can't be called just enormous, I'm sure it will grow and gain wider adoption. Don't miss it!
