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:
The package contains definitions of its 26 classes in the SVG.php
file that you must include in your scripts when using the package:
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
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
<svg width="310" height="140"
<rect x="10" y="10" width="100"
<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">
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