 With SVG, we can create graphics from plain text. And although it’s not widely supported yet, let’s have some fun with it? It’s XML-based, it’s easy, and it’s fun. And what better way to do it, than combining it with PHP and making it dynamic. Why, you ask? Because we can!
What can we use it for?
Well, right now, not a whole lot to be honest. We can't use it on the web because by default, it's only supported by Firefox 1.5. Instead, let's look at a more controlled environment: presenting images on the company intranet. When you know your audience has SVG support (by using Adobe SVG Viewer), you've got complete freedom.
So what are we going to present on the intranet? How about a graph showing the net result of the company, for instance. This data can be taken out of some database somewhere and presented on an intranet page. For this example, I'll use PHP to build our image using the data.
A basic example
Now let's see what we need to do. We need to make sure that from our PHP file (let's call it myfirstbar.php) the proper header is sent, and that it's using the right DTD. Below is a basic example that uses a couple of variables I'll be using later on. If you copy/paste this into an empty file and place it into some directory on your localhost, you can view its result (a simple box outline that we'll use for our graph).
<?
header('Content-type: image/svg+xml');
echo '<?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">
<? $width = 500;
$height = 300; $margin = 10;
$textspace = 80; ?>
<svg width="<? echo $width; ?>" height="<? echo $height; ?>" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="<? echo $margin + $textspace; ?>" y="<? echo $margin; ?>"
width="<? echo $width - (2 * $margin) - $textspace; ?>"
height="<? echo $height - (2 * $margin); ?>"
style="fill: rgb(255,255,255); stroke: rgb(0,0,0); stroke-width: 1; " />
</svg>
See it in action (opens in new window)
How did he do that?
Confused? Don't be. It's all real simple. Let's look at it, step by step. The first line that is below sends the content type to the client, and after that we send the xml declaration. The last line refers to the external SVG DTD.
<?
header('Content-type: image/svg+xml');
echo '<?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">
After that, I define the image dimensions in variables, so if needed, I can change them later: the height and width of the entire image, and the margin that is used. The space we will use for our labels is called 'textspace', mainly because I couldn't find a more suitable name. Lack of coffee might have caused that, but we'll never know.
<?
$width = 500;
$height = 300;
$margin = 10;
$textspace = 80;
?>
But where's the picture?
Finally, let's actually draw something. The easiest thing to start with is the box in which the graph will be shown, since we won't need to know anything about the data or labels for that, and the variables we defined will do perfectly. In an SVG image, the root element is always 'svg', as you can see below. The namespace for svg is defined in the root element. Within the root element, a rectangle, or 'rect' as these people like to call it, is drawn. It has a couple of properties I need to use here: x and y define the x and y position of the top left corner of the thing, and width and height are exactly what you think they are. I also use some css here (yes, that is possible with SVG) to define the fill color, the stroke color and stroke width.
But how do we define the height and width of the box? We know the margins we'll be using and we know what size the image is. But that's not all - we also want to reserve some space at the left side for our labels. So, the rectangle is horizontally positioned after the margin plus the label space (that would have been a better name for my variable 'textspace'!) and vertically only below the margin. Its width is the image width minus two times the margin (both left and right) and the textspace, and the height is the image height minus twice the margin.
<svg width="<? echo $width; ?>" height="<? echo $height; ?>" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="<? echo $margin + $textspace; ?>" y="<? echo $margin; ?>"
width="<? echo $width - (2 * $margin) - $textspace; ?>" height="<? echo $height - (2 * $margin); ?>"
style="fill: rgb(255,255,255); stroke: rgb(0,0,0); stroke-width: 1; " />
</svg>
I hope you grasp the concept of creating an image with SVG. The nice thing about it is that you won’t need any fancy libraries for it, just an up-to-date browser. If you do, please join me for part two, where we actually create a graph instead of this stupid rectangle.
SVG and PHP: because we can - Part 2
Author : NeoTeq, Read 6725 times, Comments: 1| Rating : |   | | Monday, 9. January 2006 |
Add new comment/Comments
| Your rating : Poor Excellent |
  Do you have something to say? Then say it! NetBulge.com is devoted to web development. We are always looking for fresh and relevant ideas. If you are a web designer with a voice, this is the place to make it heard.
Join us!
Featured * Many say this antivirus is much better than the leading AV in the market. The least I can say is that AVG performs extremely well and its price (free) is simply unbeatable. If you don’t have an antivirus right now or are not pleased with your current level of protection, you should give this one a try. If you are a coder and were not aware of this site, you have been seriously missing out. At Hotscripts.com you will find a very extensive collection of all sorts of scripts that will ease the work load, serve as a starting point for a new script, or simply serve as an inspiration source for good code programming. http://www.hotscripts.com/ | 
46%