Hack28.Create Beautiful Graphics with SVG | PHP Hacks: Tips & Tools For Creating Dynamic Websites

Hack 28. Create Beautiful Graphics with SVG

Use the SVG XML standard to create scalable graphics that render beautifully.

Adobe's Scalable Vector Graphics (SVG) XML standard provides a whole new level of graphics functionality to PHP web applications. In this hack, I'll use a web page and a simple PHP script to create a scalable vector graphic.

It's important to note that before you can view an SVG image you must have an SVG viewer plug-in installed in your browser. Adobe hosts plug-in viewers on its web site, http://www.adobe.com/svg/main.html. SVG is an open standard, which Adobe strongly supports. The SVG.org site (http://svg.org/) is an open community supporting the standard across multiple browsers and now even cell phones.

Figure 4-2 demonstrates how the SVG plug-in interacts with the circle_svg. php script, which generates the SVG. The SVG object embedded on the page requests the XML from the script, and the script then returns the XML with the SVG plug-in plots.

Figure 4-2. The SVG plug-in requesting SVG from the circle_svg.php script

4.3.1. The Code

Save the code in Example 4-2 as index.html.

Example 4-2. HTML for demonstration purposes

 <html> <body> <embed width="400" height="400" src="/books/1/201/1/html/2/circle_svg.php" name="printable" type="image/svg+xml" /> </body> </html>

The work is done in circle_svg.php, shown in Example 4-3.

Example 4-3. Where the real SVG work occurs

 <?php header( "content-type: text/xml" ); $points_count = 20; $points = array(); for( $p=0; $p<$points_count; $p++ ) { $d = ( 360 / $points_count ) * $p; $x = 50 + ( cos( deg2rad( $d ) ) * 50 ); $y = 50 + ( sin( deg2rad( $d ) ) * 50 ); $points []= array( 'x' => $x, 'y' => $y ); } echo ("<?xml version=\"1.0\" standalone=\"no\"?>\n" ); ?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd"> <svg style="shape-rendering:geometricPrecision;" viewBox="0 0 100 100" xml space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http:// www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"> <?php foreach( $points as $start ) { $sx = $start['x']; $sy = $start['y']; foreach( $points as $end ) { $ex = $end['x']; $ey = $end['y']; ?> <path fill-rule="nonzero" style="fill:#000000;stroke:#FF0000;stroke-width:0.2" d="M<?php echo( $sx." ".$sy ); ?> L<?php echo( $ex." ".$ey ); ?> Z"/> <?php } } ?> </svg>

4.3.2. Running the Hack

Install both files on your server and browse to them in your SVG-enabled browser. In this case, I used Internet Explorer; the result is shown in Figure 4-3.

Figure 4-3. The circle rendered with SVG

The HTML page embedded an SVG object, which triggered a call to the circle_svg.php script to get the XML code for the SVG file. That PHP page creates an SVG image, which is simply a bunch of vectors connecting the various points on a circle, much like a Spirograph. Users can even click and zoom around the image if they want, and the image will scale appropriately since it's based on vector graphics.

SVG supports a huge range of graphics and effects features. It also supports animation and has JavaScript scriptability (I have used none of that here for the sake of simplicity). In fact, when you think about SVG in terms of functionality, you should probably consider it to be on the same level as Flash 8, with the notable exception that SVG uses XML files rather than compiled SWF files. The big downside with SVG, of course, is the install base, which at the time of this writing was far smaller than that of Flash.

If you are interested in using XML to build Flash movies, check out Laszlo (http://www.laszlosystems.com/), an open source XML compiler that builds SWF movies.

4.3.3. See Also

"Simplify Your Graphics with Objects" [Hack #29]