TedPage: SVG Rectangle in PHP

It is pretty simple to create an SVG file using PHP. PHP is built on the concept of executing code inside another document, for example, PHP embedded in HTML. While that is a very good way to create dynamic SVG documents, this little tutorial is going to create the SVG file from scratch as an example. In most cases it is better to work from an SVG file created in a program like Inkscape.

Here is the rectangle that we're going to create:

Here is the source that creates it:

<?php
    $doc = domxml_new_doc("1.0");
    $root = $doc->add_root("svg");
    $root->set_attribute("xmlns",
                         "http://www.w3.org/2000/svg");
    $root->set_attribute("width", "120");
    $root->set_attribute("height", "120");

    $rect = $doc->create_element("rect");
    $root->append_child($rect);
    $rect->set_attribute("x", 10);
    $rect->set_attribute("y", 10);
    $rect->set_attribute("width", 100);
    $rect->set_attribute("height", 100);
    $rect->set_attribute("style", "stroke:#0000ff;" .
                                  "fill:#0000ff;" .
                                  "fill-opacity:0.5");

    header('Content-type: image/svg+xml');
    echo $doc->dump_mem();
?>

The code may seem verbose for the simple example that we're doing here. But, I assure you, learning the XML APIs now will save you plenty of time when your documents start getting bigger. There is quite a bit of boilerplate code that will seem tiny on larger examples.

The first thing that the code does is create the base document and create the root node. This starts our SVG document off right having only one root node, which is a requirement for an XML file. Also, the height and width of the document are specified along with the name space for SVG. The name space is required if you want your SVG document to work in Firefox (my thoughts on that).

The next section of the code deals with creating the rectangle itself. The node is allocated in the document, and tied onto the root node. If your document was larger including groups and other structures you wouldn't necessarily want to attach it to the root node, but this document is simple. We can then add various attributes to the rectangle including its position at (10,10) and its height and width. SVG works on a coordinate system where (0,0) is the upper left hand corner. So putting the rectangle at (10,10) moves it to the right 10, and down 10. Thus the 100x100 rectangle is placed in the middle of our 120x120 image.

The next few lines define the style of the rectangle. This is all done in CSS, though it introduces some operators that you might not be familiar with. Here were just setting the stroke and fill, but there is much more you can do. You can also define object's properties on a per document basis using stylesheets like you do with a webpage. This gives the designer even more flexibility to change his designs dynamically.

Lastly, some clean up stuff. We set the MIME type of the file to be SVG. It is important to note the "svg+xml", many people get confused and do "svg-xml" which is incorrect. Then the document that we created gets dumped to standard output and sent to the web browser.

Cool, now what? There is a lot of information on creating SVG on the Internet. Here is a more complex tutorial which makes a pie chart with PHP. Also, there are a few tutorials on creating SVG user interfaces that can help you with complex SVG. Of course, there is also the specification if you're having some sleepless nights.