techrageo.us » PHP

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; ?>

Security and Google Code Search

bill — Mon, 09 Oct 2006 09:05:50 +0000

If you use WordPress be careful. An example Google Code Search search going around is “username file:wp-config.php” which happily displays username and passwords in WordPress config files… if they’re in compressed archives or a publicly accessible directory.

Same goes for other configuration or settings files. For instance, connection strings in web.config files (connection string file:web.config), Movable Type passwords (file:mt-db-pass.cgi), keygen name serial, backdoor passwords (backdoor.*password), MySQL root passwords (file:config.inc.php “MySQL password” root, etc.

Spammers can cull email addresses from code with a simple code search as well ([a-z]*@[a-z]*.com)

So what have we learned?

Do not put passwords in public code, including zipped code archives.
Be more diligent to protect against SQL Injection and similar exploits. I.e. do not trust user input of any sort.
Do not put email addresses in public code.
In general, keep your eyes and ears open for security exploits and protect against them.

We can’t be perfect, but we ought to try.

Seen here, here, and here.

Hack Google Earth KML Files

bill — Wed, 06 Jul 2005 04:02:10 +0000

RuiCarmo of Tao of Mac has a great tutorial on hacking Google Earth KML (Keyhole Markup Language) files in PHP. Fun stuff. Seen here.

Google Earth / Keyhole is a downloadable mapping application that’s free for the downloading. Google Earth Plus is a $20 upgraded version that includes GPS integration, high-res printing, email support, annotation, and .csv importing.

Background – Google Earth in action

Google Earth

Google Earth – Downtown Austin, TX

Google Earth – IBM Austin

SVG Graphs with PHP

grant — Wed, 22 Jun 2005 23:46:36 +0000

SVG images are here, soon they will pretty standard on the web. The Adobe SVG plugin allows users to view the images and soon Mozilla Firefox will have SVG support built in so that no external plugin will be necessary.

Why use SVG images instead of standards like JPG or PNG?

In most instances they are smaller.
They do not lose quality when they are magnified in size.
They are easier to use and manipulate than standard image formats.
You can generate them from your application without needing a special library (like the gd library).

Why not use SVG images?

They do require a browser plugin to view.
Easy manipulation is not always a good thing.

This document is directed towards generating graphs with PHP, but you could just as easily generate any other type of image. It is almost as simple as generating simple HTML. Consider this as a small example of what can be done.

Your first SVG graph

First we’ll take a look at the SVG code needed to create simple bargraph.
Sales (in millions)
This is only a partial bargraph (2 bars), so don’t get too excited yet. The syntax should look very familiar to anyone who has used HTML or XML (which SVG is).

The first and last lines are defining the document as an SVG document.

The second line draws the title “Sales (in millions)” at the top of the image in a large font.
Sales (in millions)

The remaining two lines are where the two boxes are drawn, one for each data point.

Piece of cake, right? Well, if you look at the svg that code creates you’ll notice that it isn’t much to brag about. There are no gridlines, titles on the axis’ and no labels.

Well, you already know how to make text, so the titles and labels shouldn’t be a problem. You do need to know how to make lines though:

The above code creates a line from point x₁,y₁ to point x₂,y₂ with a width of 5 points. Now you know everything you need
to know to create a good SVG graph.

Your first PHP-generated SVG graph

Well, now I know how to create an SVG image, but how do I create a dynamic image from PHP?

I’m glad you asked. Well it is mostly just echoing the above information to the browser, but instead of outputing those 2 stagnant rectangles you should use a loop. By looping through your data and generating a bar for every data point you can easily generate the graph you came here looking for.

//These are our data points: $data = array( "2003" => 54, "2004" => 55, "2005" => 60); //Take the maximum value divided by the graph height: $divisor = 60 / 900; //here we find the max size each bar should be to fit nicely //on the page: $bar_width = round( 1200 / count( $data ), 2 ); $x_loc = 1; foreach( $data as $key => $value ) {

//The height for this data point's bar: $bar_height = round( $value / $divisor, 2 ); //The starting point for this bar (the y-coordinate): $y = ( 900 ) - $bar_height; //The x,y coordinates for the vertical text on each bar: $text_x = $x_loc + $bar_width - 10; $text_y = 890; //This is the bar: $svg .= "\n"; //Then the text on top of the bar. We are rotating it -90 degrees which //is really the same as 270 degrees, but with less numbers. We are putting the //x-axis label in normal text then putting the actual value next to it in //a small blue font: $svg .= "$key ($value)\n"; //Start the next bar at the end of this one: $x_loc += $bar_width; } echo $svg;

Now we are getting somewhere. Just by changing the datapoints we can now have a completely different graph each time. And there was much rejoicing. yeah.

That’s great, but what about other graphs?

Bar graphs aren’t going to work for you everytime, so you’ll probably need to expand your horizons to include line graphs and the dreaded pie graphs. *shudder*

They are done mostly the same way, only with more math and less sanity. The sample page has examples of all three and the library has everything you need to do these on your own (and without having to write it yourself!).

“Just give me the dang code already!”….Okay fine. Have it your way:
Sample Generated Graphs (svg browsers only)
Download the library and the sample code