calable Vector Graphics (SVG) is an XML specification for producing vector-based graphic content that you can create, modify, and manipulate dynamically from programming languages. Here, you'll explore the most important techniques and libraries for integrating SVG with PHP to create diverse graphic content—from simple shapes to complex graphs. You'll see how to:
- Convert an SVG document into a PHP document.
- Use the object and embed elements to include an SVG document in an XHTML document.
- Generate SVG using PHP's echo command.
- Generate SVG using the phpHtmlLib library.
- Generate SVG documents using the PEAR::XML_SVG package.
- Generate SVG documents using the PEAR::Image_Canvas package.
- Integrate PHP , SVG, and AJAX.
Three Simple Techniques
To get started, here are three of the simplest techniques for using SVG in PHP.
- You can convert any SVG document into a PHP document by replacing the .svg extension with the .php extension and specifying the image/svg+xml MIME type using the header() function:
<?php
header("Content-type: image/svg+xml");
?>
<?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>
- You can include an SVG document (saved with the .php extension) into an XHTML document, through the object or embed element:
<object type="image/svg+xml" width="500"
height="400"
data="svg.php"
pluginspage="http://www.adobe.com/svg/viewer/install/">
</object>
<embed type="image/svg+xml" width="500"
height="400" src="svg.php"
pluginspage=
"http://www.adobe.com/svg/viewer/install/">
</embed>
- You can generate an SVG document dynamically using the echo command:
<?php
header("Content-type: image/svg+xml");
echo '<?xml version="1.0" encoding="iso-8859-1"?>';
echo '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/
REC-SVG-20010904/DTD/svg10.dtd">';
echo '<svg width="310" height="140"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">';
echo '<g style="stroke:black;fill:lightgreen"
transform="translate(30,30)">';
echo '<rect x="10" y="10" width="100"
height="30" style="stroke-width:4"/>';
echo '<circle cx="170" cy="25" r="20"
style="stroke-width:4"/>';
echo '<line x1="265" y1="10" x2="200" y2="70"
style="stroke-width:4"/>';
echo '<text x="80" y="90" style="font:size: 8">
Basic shapes</text>';
echo '</g>';
echo '</svg>';
?>
To go beyond these techniques, it's best to download some helper packages that provide SVG support—classes and methods that simplify working with, generating, and modifying SVG. The rest of this article explains how to obtain and use these packages.
Print
Dzone.com
Digg.com
Slashdot.org
Reddit.com
Del.icio.us
