t's budget planning time for me, which means sorting through the paper war, trying to remember where everything is. To do it I list various companies on one side of a bit of paper, my cards and what-not on the other side, and draw lines between them to understand what belongs where. This time it struck me: I was marking up the page with lines. If only that could be done on the Web.
Now it can. In this article you'll see how to create a Web page in which users can draw lines. Drawing and "gestures" provide an exciting alternative to standard HTML <input> elements, links, and clickable images. After years of XML markup standards, it seems ironic that the old-fashioned pencil markup that started it all hasn't found a popular analogy on the Web.
Shopping for Technology
It's very clumsy to draw lines on an HTML page by laying out dots using one-pixel images, but until now, that's been your only choice for drawing in a browser. You need something better to make interactive graphics truly useful, and the obvious candidate is Structured Vector Graphics (SVG), a new W3C XML-based standard that describes basic graphics primitives using elements such as <line> tags.
Unfortunately, most browsers don't yet support SVG, but you can install the SVG version of Mozilla (minimum version 0.97 and use that to view pages containing SVG.
The solution shown in this article works with Netscape 4.x and Internet Explorer 4.x, 5.x and 6x. You're at the bleeding edge with SVG, so you can expect some browser problems until this article ages a bit. Nearly all of this solution also works with Netscape 6.x and Mozilla 0.x., but both browsers have serious problems with the <embed> tag at this time
Internet Explorer 6.x comes with the Adobe SVG Viewer plugin pre-installed—but it's an old version. You'll definitely want to install the latest version to get the most robust SVG performance and features. On Windows for IE or Netscape/Mozilla, download and install Adobe SVG 3.0. For IE, that's all. For Netscape or Mozilla, copy these files to the plugins sub-directory where your browser is installed:
C:\Program Files\Common Files\Adobe\SVG Viewer 3.0\
Plugins\NPSVG3.dll
C:\Program Files\Common Files\Adobe\SVG Viewer 3.0\
Plugins\NPSVG3.zip
Adobe has a plugin test page that lets you know whether the plugin installed correctly. Don't forget to restart the browser after you install the plugin.
|
Shopping for Technology 
Setting Up the User Interface 
Capturing user input 
Scripting Dynamic SVG 
