techrageo.us Site Upgrade

bill — Wed, 23 May 2007 10:25:51 +0000

techrageo.us has been upgraded to WordPress 2.2 and the look has been changed a bit with the switch to a slightly-customized CutLine theme.

Though the WordPress upgrade went okay, it had to be done manually since techrageo.us was originally installed manually. If you notice oddities around here, please let us know in a comment. Thanks!

Automation Is Good

Use one-click installs wherever possible! It is not always feasible, but Dreamhost‘s one-click install and upgrade processes, for example, are very convenient. In the case of this website, it was originally installed by hand, which left it out of the running for one-click upgrades.

Another benefit to using one-click installs, at least with Dreamhost, is that some additional plugins and wide array of themes are installed as well.

PHP and WordPress SVG Basics

bill — Sun, 08 Apr 2007 01:54:58 +0000

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
Circle In A Square

SVG Code
fill="#777" stroke="red" stroke-width="3" />

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.

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:

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

So, the following PHP generates the above SVG drawing.
$svg = << fill="navy" stroke="red" stroke-width="3" /> END; header("Content-Type: image/svg+xml"); echo $svg; ?>