Add the Graphics Power of SVG to PHP : Page 4

Generating SVG with PEAR::XML_SVG
The phpHtmlLib package is not your only resource for generating SVG. The PEAR::XML_SVG package (v. 1.0.1) is a stable release that provides an object-oriented API for building SVG documents. You can download this PEAR and install it from a shell command (ex. cmd.exe) like this:

   install {complete_XML_SVG_path}

The package contains definitions of its 26 classes in the SVG.php file that you must include in your scripts when using the package:

   require_once 'XML/SVG.php';
   

The main classes in the XML_SVG package are:

• XML_SVG—a wrapper class that provides some examples and a few convenience methods.
• XML_SVG_Document—used to create an empty SVG document.
• XML_SVG_Element—the base class for the different SVG element objects. You should extend this class to create new SVG elements.
• The XML_SVG_Group class, which is used for creating an empty SVG group.
• The XML_SVG_Rect class, which is used for creating an SVG rectangle.
• The XML_SVG_Circle class, which is used for creating an SVG circle.
• The XML_SVG_Line class, which is used for creating a SVG line.
• The XML_SVG_Text class, which is used for creating SVG text.

The code in Listing 2 generates a simple SVG document that displays some basic shapes (see Figure 5):

Figure 5. Basic Shapes: Using PEAR::XML_SVG, you can easily generate SVG documents that display basic shapes.

The SVG document generated by Listing 2 is:

   <?xml version="1.0" encoding="iso-8859-1"?>
   <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
     "http://www.w3.org/TR/2001/
      REC-SVG-20010904/DTD/svg10.dtd">
   <svg width="310" height="140" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
     <g style="stroke:black;fill:lightgreen" 
       transform="translate(30,30)">
       <rect x="10" y="10" width="100" 
         height="30" style="stroke-width:4"/>
       <circle cx="170" cy="25" r="20" 
         style="stroke-width:4"/>
       <line x1="265" y1="10" x2="200" y2="70" 
         style="stroke-width:4"/>
       <text x="80" y="90" style="font:size: 8">
         Basic shapes</text>
     </g>
   </svg>

To insert animation into an SVG document you can use the XML_SVG_Animate class, derived from the XML_SVG_Element class. The constructor takes an array of arguments as follows:

Figure 6. SVG Animation Generated by PEAR::XML_SVG: The green car on the left shows the animation state as it begins, while the red car on the right shows the completed animation.

• attributeName—Specifies the name of the SVG attribute/CSS property to be animated.
• attributeType—Specifies the type of the animated SVG attribute/CSS property. The supported values are "XML" and "CSS."
• from—Specifies the initial value of the animated SVG attribute/CSS property.
• to—Specifies the final value of the animated SVG attribute/CSS property.
• dur—Sets the duration of the animation in seconds.
• fill—Used to "freeze" the animation after the first run.

As an example, Listing 3 shows the code for a small car animation. Although you have to imagine the animation, it works like this: The car travels from left to right. During the animation, the car's color changes from green to red. A text animation runs simultaneously that modifies the color and size of the text (see Figure 6).

Previous Page

Next Page

Other Articles by this Author