svgPHPGrapher - a new math plotter

Over the last few weeks I've been developing a new math plotter. It produces an svg image server-side using PHP.

The motivation

The graphs on IntMath were produced over a number of years using a range of different software, and were starting to look rather dated. Most of the curves were pixelated, and I'd used a motley range of clashing colors.

For the last few years I've been using JSXGraph to produce interactive graphs (see plenty of examples here). JSXGraph gives nice SVG output and it's cross-browser.

However, the problem with JSXGraph is it involves a large footprint (167 kB of script, even after compression by gzip), which is a killer for mobile devices, especially if you just want to plot a simple graph on your Web page. Yes, the js file is cached by the browser, but a lot of first-time users will hit the back button rather than waiting for a large download.

Another issue is there is already too much javascript on my pages (and on the Web generally). A typical IntMath page involves:

Google ads pull in a whole lot more javascript (it varies on each page, but 400 kB is common).

Google Analytics (for optimizing the site, about 18 kB)

All that javascript means a lot to download (more than 50% of the total download for most pages) and puts a load on your device's processor, especially noticeable when viewed on mobile devices. I try to have the minimum amount of javascript on the site (particularly the mobile version), to reduce page load times and processor overhead, but it's a challenge.

Another issue is that most of the graphs on IntMath don't need to be interactive. The purpose of many of the graphs is to illustrate a concept, or to show main features of a function. So there's no need for a large chunk of javascript, designed for interactivity, just to show a static graph.

The grapher brief

My aim was to produce a grapher with the following characteristics:

Small page load time

Not javascript based

All the grunt work would be done on the server (not the client device)

Produced good looking graphs

Displays axis variables (How often did your math teach tell you to "label your axes"? Most graphing software does not include this feature.)

Relatively easy to use

Enter svgPHPGrapher...

svgPHPGrapher

svgPHPGrapher is based on Peter Jipsen's ASCIIsvg.js, which is a javascript-based SVG (scalable vector graphics) grapher. When he first published this script (around 2005), svg support in browsers was very rudimentary (IE didn't support it at all, of course), so it couldn't be reliably used. But now, all major browsers support svg, including those on mobile devices.

svgPHPGrapher is a highly modificed PHP port of the ASCIIsvg javascript codebase.

The idea is that some PHP code on your PHP page calls some functions, which create an svg-based image, and it's then printed out to the page. The processing "work" is done on the server, and immediately output. This creates a slightly larger HTML page, but there is no separate file to download, and no javascript involved.

There is also the option to cache graphs, so if they take a lot of processing time. it needs to only happen once (by the first visitor) and subsequent visitors will see the cached svg image.

What is SVG?

SVG stands for "scalable vector graphics" and it's a method for producing crisp, good looking images at any resolution. Older image formats like GIF, PNG and JPEG are made up of a collection of colored pixels in fixed positions. When you zoom in on such images, you see pixelated edges. But in the case of SVG images, the edges remain crisp. (This is desirable in this age of mobile devices with retina screens, and the requirement to produce scalable images for different screen sizes.)

For example, here are screen shots from a zoomed-in SVG image (on the left), where you can see the fonts and curves are smooth and attractive, while the one on the right is a zoomed in PNG image of the same subject matter. You can see the shape edges are quite ugly, and the fonts are no better.

SVG allows you to describe an image mathematically. For example, an ellipse is created using:

2 Comments on “svgPHPGrapher - a new math plotter”

Sites with a lot of traffic face the problem that you need a lot of power to run the scripting; at least if more complex functions are involved. Moreover, for these more complex plots, the SVG data tends to exceed the code necessary to create it. So you get more traffic, not less.

As a side remark, SVG is not the answer to scaling as many seem to think. Scaling is done with different font sizes, line widths, textures, point sizes, even different layouts for different print or display sizes. This can be handled much better by interactive plots, if the graphics is resizable on the page. Sorry about this remark, but I often hear this misconception about SVG and other vector formats.

(1) As for power to run the scripting, it's always much better to do that on the server, than on the client machine, especially when targeting mobile devices.

(2) My system allows for caching, so it only needs to be created once. (I'm still perfecting this, but it's close.)

(3) Each of the cached files is small (largest out of all my examples so far is about 8 kB. The size of the PHP code is irrelevant (and not that big anyway - a lot smaller than JSXGraph, for example), because it is cached on the server.

(4) I'm still experimenting, but I believe that my statement about changing resolutions is valid.