← →

PHP and WordPress SVG Basics

April 7th, 2007 by bill · 3 Comments

»Basic HTML and PHP SVG intro with very simple example of embedding an SVG drawing in HTML (or a WordPress post).

 

Scalable Vector Graphics, or SVG, is an XML standard for vector graphics (of course). That means that it contains descriptions of shapes, such as rectangles, lines, circles, and text, in an XML format.

SVG provides a robust definition language for drawings. The drawing at the right was a sample SVG drawing included in Jasc’s WebDraw. There are many other examples on the web of complex SVG drawings.

I’ve been playing around with SVG just a bit and thought I’d record the basics of getting simple shapes embedded in a page and how to do it with PHP and in WordPress.

Grant posted an article here a couple years ago on creating SVG Graphs With PHP, so check that out too if you want a more complicated example.

SVG in HTML

The simplest way to get SVG vector drawings in an HTML file is to embed an .svg file. The HTML and SVG source will look something like the following

HTML Code

<html>
<body>
Circle In A Square<br/>
<embed width="100" height="100" src="/wp-content/code/phpsvg1.svg"/>
</body>
</html>

SVG Code

<?xml version="1.0"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="50" height="50"
fill="#777" stroke="red" stroke-width="3" />
<circle cx="16" cy="16" r="8" fill="black" stroke="yellow" stroke-width="3"/>
</svg>

Output

Circle In A Square

WordPress and SVG

To include an SVG drawing in a WordPress post, simply create and upload an SVG file then put the HTML EMBED tag in your WordPress post.

<embed width="100" height="100" src="/wp-content/code/phpsvg1.svg"/>

Basic SVG Tags

There are plenty of exhaustive SVG references on the web, so let’s look at just the tags used above.

svg – This tag indicates the beginning of an SVG drawing. The attibutes used above are width and height, both self-
describing, viewBox which describes a clipping rectangle for the drawing, and xmlns which simply defines the default namespace for
the XML tags used in the drawing.

rect – Here we define the rectangle, with x and y being the upper-left corner, width and height again are obvious, fill
is the rectangle’s color in hex digits, stroke is the color of the line used to draw the outside boundary of the rectangle, and
stroke-width is the width of that line.

circle – This defines the circle. cx and cy determine the center point of the circle, while r is the radius; fill,
stroke, and stroke-width have the same meanings as was used for the rectangle.

PHP SVG

Of course, outputting SVG from PHP requires that you output the SVG source back to the browser. However, PHP output will normally be marked as being of Content-Type: text/html, so you have to do two things to send back SVG:

  1. First, set the Content-Type header to image/svg+xml
  2. Second, make sure your php file does not contain any text outside the script tags.

So, the following PHP generates the above SVG drawing.

<?php
$svg = <<<END
<?xml version="1.0" standalone="no"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="50" height="50"
fill="navy" stroke="red" stroke-width="3" />
<circle cx="16" cy="16" r="8" fill="black" stroke="yellow" stroke-width="3"/>
</svg>
END;
header("Content-Type: image/svg+xml");
echo $svg;
?>

Tags: PHP · Programming · SVG · Web design · Wordpress · XML

 

3 responses so far ↓

Leave a Comment