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

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