RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Add the Graphics Power of SVG to PHP : Page 5

Discover how to generate and manipulate SVG documents dynamically—directly from PHP.

Generating SVG with PEAR::Image_Canvas
This package provides a common interface for drawing images; the images created are independent of the library. The package is still in alpha relase (the latest released version is 0.3.1). You can download this PEAR and install it from a command-line prompt like this:

   install {complete_Image_Canvas_path}
Author's Note: Documentation for this library is difficult to find and not well arranged, so I've provided some for the most common and useful methods in the sidebar "PEAR::Image_Canvas Methods."

Figure 7. Basic Shapes: You can draw nice-looking basic shapes, controlling borders and fill gradients using PEAR::Image_Canvas.
Here's some sample code that generates an SVG document for drawing the basic shapes supported by the Image_Canvas package (see Figure 7):

   include_once 'Image/Canvas.php';
   $Canvas=& Image_Canvas::factory(
      'direction' => 'horizontal', 
      'start' => 'orange', 
      'end' => 'brown'));
   $Canvas->ellipse(array('x' => 75, 
      'y' => 55, 'rx' => 40, 'ry' => 30));
      'name' => 'Arial', 'size' => 12));
      'x' => 58, 'y' => 90, 
      'text' => 'Ellipse','color'=>'orange'));
      'direction' => 'vertical', 'start' => 'white', 
      'end' => 'red'));
   $Canvas->addVertex(array('x' => 130, 'y' => 25));
   $Canvas->addVertex(array('x' => 180, 'y' => 25));
   $Canvas->addVertex(array('x' => 180, 'y' => 100));      
   $Canvas->polygon(array('connect' => true));
      'name' => 'Arial', 'size' => 12));
      'x' => 140, 'y' => 105, 'text' => 'Polygon',
      'name' => 'Arial', 'size' => 12));
      'x' => 90, 'y' => 145, 'text' => 'Line','color'=>'blue'));
      'x' => 398, 'y' => 298, 
      'filename' => './pear-icon.png', 
      'alignment' => array(
         'horizontal' => 'right', 
         'vertical' => 'bottom')));
Figure 8. Composite Image: This image shows a composited set of SVG graphs built with the PEAR::Image_Canvas library.
You can go well beyond basic shapes by combining various elements in documents. For example, Listing 4 contains code to draw an image (see Figure 8) that displays a set of diagrams (a smooth area graph, an area graph, a smooth line graph, a line graph, a bar graph, and an odo graph).

Creating Dynamic Graphs
You're not limited to static graphs. For example, you can use AJAX with SVG and PHP to create graphs that update dynamically when data changes. Listing 5 shows the HTML for the page that displays the graph, while Listing 6 shows the PHP code, and Listing 7 shows the JavaScript. Here's the SVG output:

   <?xml version="1.0" encoding="utf-8" ?>
   <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
   <svg width="100%" height="100%" 
Figure 9. Dynamic Graph: This SVG graph gets generated dynamically through AJAX and PHP.
<script type="text/ecmascript" xlink:href="diagram.js" /> </svg>
The SVG shown above gets rendered as shown in Figure 9. SVG is an elegant method for implementing graphical content in your web applications. It gives your browser clients the ability to draw vector graphics that you can generate and modify dynamically from PHP and other languages. As you've seen, there are several different PHP packages available that provide SVG support. You'll have to experiment with them to determine the SVG pakage that corresponds most closely with your application's requirements.

Octavia Andreea Anghel is a senior PHP developer currently working as a primary trainer for programming teams that participate at national and international software-development contests. She consults on developing educational projects at a national level. She is a coauthor of the book "XML Technologies—XML in Java" (Albastra, ISBN 978-973-650-210-1), for which she wrote the XML portions. In addition to PHP and XML, she's interested in software architecture, web services, UML, and high-performance unit tests.
Email AuthorEmail Author
Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date