Add the Graphics Power of SVG to PHP : Page 5

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

   <?php 
   include_once 'Image/Canvas.php';
   
   $Canvas=& Image_Canvas::factory(
      'svg',array('width'=>400,'height'=>300));
   
   $Canvas->setLineColor('black');
   $Canvas->rectangle(array(
      'x0'=>0,'y0'=>0,'x1'=>210,'y1'=>170));
   
   $Canvas->setGradientFill(array(
      'direction' => 'horizontal', 
      'start' => 'orange', 
      'end' => 'brown'));
   $Canvas->setLineColor('red');
   $Canvas->ellipse(array('x' => 75, 
      'y' => 55, 'rx' => 40, 'ry' => 30));
   $Canvas->setFont(array(
      'name' => 'Arial', 'size' => 12));
   $Canvas->addText(array(
      'x' => 58, 'y' => 90, 
      'text' => 'Ellipse','color'=>'orange'));
   
   $Canvas->setGradientFill(array(
      'direction' => 'vertical', 'start' => 'white', 
      'end' => 'red'));
   $Canvas->setLineColor('black');
   $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));
   $Canvas->setFont(array(
      'name' => 'Arial', 'size' => 12));
   $Canvas->addText(array(
      'x' => 140, 'y' => 105, 'text' => 'Polygon',
      'color'=>'red'));
   
   $Canvas->setLineColor('blue');
   $Canvas->line(array(
      'x0'=>10,'y0'=>140,'x1'=>190,'y1'=>140));
   $Canvas->setFont(array(
      'name' => 'Arial', 'size' => 12));
   $Canvas->addText(array(
      'x' => 90, 'y' => 145, 'text' => 'Line','color'=>'blue'));
   
   $Canvas->image(array(
      'x' => 398, 'y' => 298, 
      'filename' => './pear-icon.png', 
      'alignment' => array(
         'horizontal' => 'right', 
         'vertical' => 'bottom')));
   
   $Canvas->show();
   
   ?>

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" 
     "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
   <svg width="100%" height="100%" 
      xmlns="http://www.w3.org/2000/svg" 
      xmlns:xlink="http://www.w3.org/1999/xlink" 
      onload="generateSVG(evt);">

 
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.

Previous Page

Other Articles by this Author