Scalable Vector Graphics (SVG) is a new graphics file format and Web development language based on XML. SVG enables Web developers and designers to create dynamically generated, high-quality graphics from real-time data with precise structural and visual control.
With this powerful new technology, SVG developers can create a new generation of Web applications based on data-driven, interactive, and personalized graphics.
SVG is an acronym that some people might have glossed over. So I want to start with the basics to make sure that the reader knows what this is all about. SVG is not very complex when you pull it a part. It is a markup language for graphics. It is:
S = Scalable - you can display the image at any size without resolution loss.
V = Vector. Lines and shapes are defined by geometry, not dots.
G = Graphics, yeah?
So, what does it look like? An example from w3org. Note:If you are using IE7 you will be asked if you want to activate their SVG plugin.)
If you go to the page source, you will see:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
<desc>Example rect01 - rectangle with sharp corners</desc>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2"/>
<rect x="400" y="100" width="400" height="200"
fill="yellow" stroke="navy" stroke-width="10" />
Now it's easy to write some php or jquery to generate this, and extending the code would allow data to be passed in. But the ultimate outcome would be re-usable code for generating the SVG, and some other code for converting raw data into graphical displays (charts, maps, UML, etc).