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">

$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: