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?
Example
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:
<?php
<?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">
<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" />
</svg>
?>
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).
I don't speculate about the best solution. For example, it would be useful to have these libraries in php, but if you need dynamic graphing you might want data via AJAX with JavaScript parsing it into SVG sounds.
