Kaye and Geoff's web page documentation
IntroductionThis page is about the dynamic creation of graphics in web pages, in other words displaying a graphic not from a pre-existing image file but creating it from scratch in response to the user's actions or maybe the web page environment or saved data.
There are a variety of ways to dynamically display graphics. You may have access to graphics packages such as GD or ImageMagick through your web hosting service. These graphics packages consist of a collection of routines which can be used stand-alone or called from Perl or PHP or C or some other programming language running as a CGI, which creates a file in a format (for example GIF) which a web page can reference. GD is free, includes a Perl interface, and runs on Unix servers. ImageMagick is available for Unix and Windows and has a Perl interface (PerlMagick).
We use a hosting service which supports GD and ImageMagick (and therefore we can use GD to plot our dam level), but yours may not, or you might want to create an animated picture which is not so effective with these packages, or you may not be a wizz at Perl or PHP. So, without using a server-based graphics package, what possibilties are open to developers who want dynamic graphics?
The information here is a summary of our current experience in dynamic plotting, so there are likely to be other techniques which we have yet to discover or explore. For example CSS may have something to offer, but our (only slightly jaundiced) view of style sheets leads us to put them at the bottom of our list at this stage. Google also offers a possible solution - chart tools - which looks flexible but we have not investigated it.
Using the img tag
Data sources for plotting
You can see a reasonably sophisticated example of plotting using internally generated values in our population genetics simulation. (If you are not trained in genetics then just push the "simulate" button to produce a plot. Convince yourself that it is generated dynamically by pushing the button as many times as you like). In fact this page illustrates a way of producing a plot using multiple picture substitution rather than the document.write() method described above. The complete picture is built by puting together a collection of pre-existing smaller pictures. It is not elegant but it works.
A more elegant approach is to manipulate image objects in the document object model (DOM), inserting or removing them as required to build a more complex image. Because changes to the DOM are reflected immediately on the web page, this technique allows the graphics on the screen to be animated or to respond to input from the keyboard or mouse. This is how our Numero game expands or shrinks a spread of cards on the screen - by the addition or removal of pictures of complete or partial cards - simulating the cards being overlapped on a tabletop.
Often we have a large body of externally collected data stored on the server, from which we want to select a subset to display in graphical form on a web page. Making an image file of every possible graph is too much work, and usually not practical. The basic approach to solve this problem is to use a CGI (Common Gateway Interface). This is a program which runs on the server and either
Scalable Vector Graphics (SVG)
The only down-side is that browsers have been very slow to provide support for SVG, so older versions will not display it, or may need a plug-in, or may only implement a subset of the complete specification. This is changing, to the extent that the latest versions of all popular browsers probably understand SVG natively. Traditionally Internet Explorer included SVG graphics in a web page using the non-standard embed tag, but the latest version allows the equivalent standard object tag. For these reasons you need to determine the nature of your audience before committing to relying on SVG graphics in your web pages.
If you saw a purple circle at the top of this page then your browser can display SVG graphics. If it repeatedly (actually, just three times since it soon gets annoying) grows in size then your browser also supports SMIL (Synchronized Media Integration Language) which integrates with SVG to add the ability to animate the graphical elements. If you see a green circle then your browser supports SVG with the img tag (and also supports SMIL if the circle moves from left to right).
The SVG code to create the purple picture is as follows:
You can see the svg tags which surround the whole picture description, and the circle tags which define the single graphical element - a purple circle centred on cx,cy with a radius of r. The animate tag changes the value of r through time to make the circle grow. Note that following XML rules all tags must be terminated, either using a "standalone" terminating tag (for example </svg>) or with a slash before the closing > (as in the animate tag used above). Because it is just text, creating such a file either with a text editor or from a program is conceptually straight-forward. The code for the green picture is similar except that the position of the centre in the X direction is changed over time, rather than the radius.
Our experience with SVG is far too limited to attempt a detailed description of the language, but we do offer some comments below on its use in web pages. Try these links for more specific information on SVG:
SVG in the WWW environment
There are some practical considerations when using SVG graphics in a web environment. The first is the server configuration.
When you display a picture from an SVG file (for example in an iframe or with an img tag as in the examples above) the web server inserts the MIME type into the HTTP header. To do this the server needs to be told that image/svg+xml is one of the MIME types that it should recognise. This is not always the case, so if instead of seeing a picture you see your SVG code, or some other error, then before you blame the browser, check that your server has been told to recognise SVG files. Varying server configurations may also limit the animation behaviour of your SVG picture even when your browser supports the full range of animation options.
The second consideration is the method used to link the SVG to the HTML. In the example above the SVG file is displayed in an inline frame with the following HTML:
but there are other ways to display a SVG file. As already noted, you can use an object tag, or an embed tag, depending on which browsers you think your audience might have; or preferably both, in such a way that only one is actioned:
This works because the browser ignores anything between the opening and closing embed tags if it recognises them; if it does not then it ignores them, and so sees the object tags. Note the (MIME) type of the SVG file - we will see this used in a related way later. As with other image formats, the img tag can also be used to display SVG files, or the file name can be passed directly to the browser (just like any URI) if the browser has native support for SVG.
Another consideration arises when you are using a CGI to dynamically create your SVG. Once you have the SVG code, you can either return it to the web server which will deliver it to the browser, or you can create an SVG file and return the HTML (or a reference to an HTML file in the HTTP) which can then include the SVG file using one of the methods discussed above.
If you return SVG via the web server, the HTTP header must include the content (or MIME) type. For SVG this is image/svg+xml. So your CGI needs to return:
Note that the blank line under the "Content-type" line is absolutely required - it separates the HTTP header (which here consists of just one line containing the content type) from the body (here the SVG code).
How the returned graphic is formatted on the page depends on how the CGI is invoked, but the rules are the same as for graphics files referenced from HTML in the normal way. The picture will form the entire contents of a page, or a frame, or an inline frame, if it is invoked from any of these elements. If the CGI is called from a form, the target attribute can be used to display the picture in a named frame or a new window. The CGI can also be invoked directly from an img tag, for example:
If you want your SVG picture to be saved and then displayed on a web page, you need to create an SVG file from your CGI and then ensure that the web page which is displayed on return from the CGI includes the appropriate HTML to reference it. To do this, the CGI can create the HTML, or alternatively can use the "location" HTTP directive to specify the HTML file to be displayed (in this latter case the name of the SVG file would have to be fixed).
As you can see from the examples in the CGI page, a web page returned from a CGI (in the example below including an object tag to load the SVG) has the following format:
To get the browser to load an HTML file called svgexample.html, the CGI needs to return:
In the last case there is no HTTP body, but a blank line below "Location" is still required (failing to do this is a very common source of error when creating HTTP from within a program).
The Canvas tag
To provide an example for discussion, here is a complete page which consists a text header and a drawing using canvas.
Example using Canvas
Here is the page:
Example using Canvas
Properties can be set to control the fill colour, line colour, text colour and so on, and these stay in force until they are changed. There are methods to draw rectangles, arcs (and therefore circles), lines, several types of curves, text and images read from files. Note that care must be taken to ensure that images are fully loaded before any attempt is made to display them. While there are routines to draw rectangles directly, other shapes are defined first but not displayed until a fill() or stroke() function is called. By default each drawing object is opaque and lies on top of the previous objects, but there are ways to change these behaviours.
If you want more detailed information on HTML5 graphics and the <canvas> tag, these links should get you started:
Wikipedia's article on canvas
Web Developer canvas tutorial
HTML5 Canvas Line Tutorial
Dive into HTML5's canvas tutorial
a tutorial from Tutorialspoint
Dev.Opera's "HTML5 canvas - the basics"