Logo IMG
HOME > PAST ISSUE > Article Detail


Pixels or Perish

The art of scientific illustration will have to adapt to the new age of online publishing

Brian Hayes

The Web Playground

In some respects the Web is an unlikely source for innovations in high-quality graphics. It began as a text-only service, and when graphics were first introduced—through the <img> element of HTML—the only acceptable formats were raster images. Proposals for including vector graphics in Web pages were discussed all through the 1990s, and standards were drafted soon after. Nevertheless, vector formats have become a convenient and practical option for Web graphics only in the past few years.

In spite of this long struggle to bring drawing to the Web, the medium has attracted a community of talented programmers, designers and artists, who find it a friendly place for experimenting with new ideas and showing off the results. By its nature, the Web is a very open system, where anyone who can view a page can also see the code that created it.

We now have two widely supported schemes for drawing on Web pages. (Two is not necessarily better than one.) The <canvas> element of HTML is closely analogous to the <img> tag but accommodates vector graphics. Scalable Vector Graphics, or SVG, introduces an entire sublanguage similar in structure to HTML.

Even before these additions, the Web was already a polyglot nation. Web browsers have to speak at least three languages: HTML (Hypertext Markup Language), CSS (Cascading Style Sheets) and the JavaScript programming language. These are, respectively, the nouns, the adjectives and the verbs of the Web. HTML sets forth the basic structure of a document (paragraphs, headings); CSS provides guidance on how to present the various elements (colors, fonts, margins); JavaScript encodes actions (responding to mouse clicks and other events).

The <canvas> element, as the name suggests, is a blank rectangular surface for drawing on. It has a fixed size and can be placed anywhere in a document. The dimensions are measured in screen pixels, so this is not a device-independent graphics protocol; however, coordinates can be specified with precision finer than the pixel resolution. The JavaScript methods that draw shapes on the canvas include procedures named moveTo, lineTo, stroke and fill, with an explicit nod to the PostScript heritage. There are even the same options for line caps and joints.

SVG works a little differently. Instead of setting aside a rectangular region that isolates the drawing from other elements of the document, SVG incorporates the drawing commands into the same data structure (called the Document Object Model, or DOM) that holds all the HTML. Indeed, the SVG language is a close cousin of HTML, with a similar syntax based on tags enclosed in angle brackets. And, like HTML, SVG is a noun language; but the nouns are different, defining lines and curves rather than paragraphs, tables and lists.

Whereas drawing on a canvas is done procedurally—by invoking JavaScript functions—SVG drawing elements can be defined in a declarative manner, simply by listing their coordinates and properties, in much the same way that text is entered into an HTML file. This declarative style might suggest that an SVG drawing is a static object, defined in advance and never changing. But it is brought to life by JavaScript, which can inject new drawing elements, remove old ones, rearrange objects or alter their style attributes. JavaScript programs have access to the entire DOM, so operations on drawings use the same basic mechanisms as operations on text.

SVG also borrows heavily from PostScript (including the line caps and joints). And in this case the drawing space truly is device-independent and capable of very high precision. Anything displayed on the screen must ultimately be mapped to a finite number of pixels, but SVG drawings take maximum advantage of the available resolution, just as PostScript figures do.

comments powered by Disqus


Subscribe to American Scientist