ExpatTech is closed for the holidays from December 22nd to January 1st. We will open again on Wednesday January the 2nd. Happy Holidays!

ExpatTech Techblog

Peter Todd 2011.04.27. 08:53

SVG Graphics and generating them

SVG (Scalable Vector Graphics) is an XML-based format. It is quite nice and useful, especially if we want to use them specifically. Therefore here we have a nice little example, how to create SVG graphics.

Basically it's not hard to generate one, let's see an easy fingerbreaker:

 

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='800px' height='600px'>
<circle cx='10' cy='10' r='5' style='fill: red;'></circle>
</svg>
 
Now, it doesn't really need any further explanation, as it's a simple xml, so humans can also read it.
 
NB! Since we are talking about vectorgraphics, and the example above creates a circle with a radius of 5, to create another one, a big one, which fills the screen is just to edit some numbers. Therefore it won't take much space and use any special bandwidth.
 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='800px' height='600px'>
<circle cx='10' cy='10' r='500' style='fill: red;'></circle>
</svg>
 
This draws a circle with a radius of 500.
 
Now if we use the advantages of php we can quickly create some amazing images.
Check the code on your machine:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='800px' height='600px'>
<rect width="800" height="600" style="fill:rgb(0,0,255);stroke-width:1; stroke:rgb(0,0,0)"/>
<?
$pieces = 4800;
$cols = 80;
$r = 10;
 
for($i = 0; $i < $pieces; $i++)
{
$col = ($i % $cols) * $r * 2 + $r;
$row = (int)($i / $cols) * $r * 2 + $r;
 
echo "<circle cx='$col' cy='$row' r='$r' style='fill: red;'></circle>";
}
?>
</svg>
 
This code creates an svg, draws a rectangle, then places 4800 little circles on top.
Tags: