Browse DevX
Sign up for e-mail newsletters from DevX


Add the Graphics Power of SVG to PHP : Page 4

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

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"
   <svg width="310" height="140" 
     <g style="stroke:black;fill:lightgreen" 
       <rect x="10" y="10" width="100" 
         height="30" style="stroke-width:4"/>
       <circle cx="170" cy="25" r="20" 
       <line x1="265" y1="10" x2="200" y2="70" 
       <text x="80" y="90" style="font:size: 8">
         Basic shapes</text>
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).

Thanks for your registration, follow us on our social networks to keep up-to-date