Math graphs on the Web without images

There are many problems with images (.gif. ,jpg and .png) on Web pages. They are static (that is, they are the same each time you look at them), there is limited user interaction, and they take up bandwidth.

I'm always on the lookout for alternatives to images for Interactive Mathematics.

Scalable vector graphics offer many advantages over images. A scalable vector graphic is a small text file that your browser (if you are using a good browser) renders as an image. It solves each of the issues raised above. Readers can easily change the graph to whatever math function they want to see, and such graphics involve very small file sizes.

One easy way to implement scalable vector graphics on a Web page is to use ASCIIsvg. Below is an example, showing the graph of y = sin e^x.

Note 1: SVG now works on all modern browsers. Yes, even Internet Explorer!

Note 2: You need to view this page in the original blog post. It won't work if you are viewing via an RSS feed in your aggregator.

You can mouse over the graph and it shows the coordinates of the cursor position. You can use this to determine particular points on your graph (for example, where the curve cuts the x-axis).

You can double click on the graph to see the code that was used to create it. You can also change parameters in this code then re-draw the graph. (Click the "Update" button after you've made your changes.)

If you can't see a graph above and don't know what I am talking about, this is a screen shot. If you view this article using Firefox (or Chrome or Opera) browser, you'll see something like this:

Screen shot of SVG plot

How does it Work?

The graph uses the native SVG capability of (good) browsers (like Firefox, Chrome and Opera). SVG stands for scalable vector graphics, which as mentioned above, produces high quality images usually with very small file sizes. (You can learn more about vector-based art here: Vector Art).

For the graph above, the only code used on the Web page is this:

\begin {graph} width=400; height=300; xmin=-1.5; xmax=3.5; 
ymin=-1.5; ymax=1.5; xscl=1; axes(); plot(sin(e^x));  \end{graph}

SVG is very powerful, but can be difficult to obtain the graphs you want. So Stephen Jipsen of Chapman University developed ASCIISVGsvg which is a javascript interface for SVG. That is, it makes our lives easier.

Earlier I wrote about the related solution ASCIIMathML (see Enter math in emails, forums and Web pages using ASCIIMathML). ASCIISVGsvg is included in some versions of ASCIIMathML.

How do I set up ASCIIsvg on my own Web page or blog?

You just need to download 2 files from ASCIIsvg main page:

1. d.svg (this is a very small file that the "embed" tag uses)
2. ASCIIsvg.js (this is the javascript that talks to the SVG rendering capability of your browser)

Then, add the code to embed an SVG graph, which will be something like this:

<embed width="117" height="117" src="d.svg" 
script='initPicture(-2,2)
axes()
stroke = "blue"
plot(2x^2 - 3x)
'>

Finally, add a call to the javascript file (best at the bottom of your HTML page) something like this:

<script type="text/javascript" 
src="http://mysite.com/ASCIIsvg_min.js"></script>

Advantages of Drawing Graphs using SVG

1. The old way: I drew nearly all of the graphs on Interactive Mathematics using mathematics software (either LiveMath, Scientific Notebook or similar) and then I took a screen shot using an image editing software. I then saved the image and uploaded it to the server. This is a many-step process that is fiddly and inconvenient, especially if you want to change anything on the graph.

   But SVG-based graphs are much easier to work with. You just change a bit of simple code and you get your new graph right there on the page.

2. Another key advantage of SVG graphs is the small file size, since it just uses a small bit of simple code. This is good for you (it downloads quickly) and me (it reduces bandwidth costs).
3. Readers can plot their own graphs on the Web without having to create images. (See how below.)
4. You can print high quality graphs from your browser

Disadvantages of Graphs using SVG

1. It is not (yet) cross-browser, since Internet Explorer does not render SVG. This is a big limitation, but since IE is now less than half of the browser market, maybe it won't be a problem for much longer. (Well, we live in hope. 🙂 )
2. You need the javascript to run on the Web page. So as I said above, you can't see the graph if you are reading this via a feed.
3. Despite what I said above about file sizes, your browser will download the ASCIIMathML javascript, and this is not so small at 150kB. But if you use ASCIIsvg only and use file compression on your server, it comes down to 7 kB only, which is less than many images on the Web. Of course, your browser will cache it so it is a one-time download.

My Examples of Graphs using SVG

There are a few versions of ASCIIsvg floating around. I first started with the ASCIIsvg which is inbuilt into ASCIIMathML, but I found it was quite limited. (I spent too long trying to figure out how to change parameters and gave up.)

I settled on (pure) ASCIIsvg since it was much more transparent. A big downside is it uses the "<embed>" tag, which is not HTML-compliant.

Adding vectors: I produced a page in the Vectors chapter: Adding Vectors which produces a different example each time you re-load the page.

User-generated graphs: You can plot your own graphs on this page: Plot your own SVG Math Graphs

Resources for ASCIIsvg

You can obtain ASCIIMathML from here: ASCIIMathML.

If you only want graphs and not the whole math rendering engine, you can get ASCIIsvg here: ASCIIsvg main page

Get your questions answered here: ASCIIMath Google Group

More examples of graphs using SVG: SVG Gallery

See the 2 Comments below.