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