Browse DevX
Sign up for e-mail newsletters from DevX


Add the Graphics Power of SVG to PHP

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




Building the Right Environment to Support AI, Machine Learning and Deep Learning

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.

  1. 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:
  2. <?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>

  3. You can include an SVG document (saved with the .php extension) into an XHTML document, through the object or embed element:
  4. <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>

  5. You can generate an SVG document dynamically using the echo command:

  6. <?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.

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