Introduction
SVG (Scalable Vector Graphics) is a language for describing two-dimensional graphics, with possible animation, in XML. The standard specifications for this language can be found here.
Background
To understand why SVG images are useful, we need to first discuss how they differ from bitmap images:
A Bitmap graphic is a representation, consisting of rows and columns of dots (pixels), of an image in computer memory. They do nothing more than archive an image one square at a time. You’ve seen these images everywhere, and have probably created a few yourself. GIF, BMP, JPEG, these are all bitmap image types.
On the other hand a vector graphic is an image made up of individual objects instead of pixels; and these objects are defined by mathematical equations. These equations are rendered on demand, meaning the image is completely generated when you ask for it. SVG images fall into this category, however the mathematical equations are being represented by XML tags.
Features
Since SVG images are plain-text XML code, they can be scaled, manipulated, or even created dynamically on Websites by PHP, ASP, Javascript, and more:
- Image scaling without pixelation, blur, or compression.
- Default anti-aliasing.
- Animation.
- Future support for XHTML integration through foreign namespaces (SVG code directly in the XHTML page).
And best of all, they can be created easily in professional art programs like Adobe Illustrator and Inkscape (Linux).
Examples
This is the SVG image code of a red circle outlined in blue:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="600" cy="200" r="100"
fill="red" stroke="blue" stroke-width="10" />
</svg>
This should give you an idea of how the SVG image is written. You can even save this code in a text file, named something like “circle.svg”, and it will actually render in a Web browser as an image!
Resources
If you wish to learn more about how you can create and use SVG images on Websites and more, check out the links below:
SVG at W3CSchools
Basic Shapes in SVG
SVG images in HTML
Dynamic graphs with SVG
SVG at Wikipedia