Grafox: An SVG Firefox Extension

An Open Source Project

Introduction

Over the last few years, Mozilla has developed a mature and stable SVG implementation. Firefox is almost certainly the most widely distributed browser with native SVG support. However, there are still missing features in Firefox's SVG. Some of these are simply yet to be implemented, such as animation, and some are by design, such as the ability to pan and zoom; still others are features from SVG Tiny 1.2, which Mozilla has not yet announced an intention to implement. But in addition to its SVG support and other features, Firefox also has a method for community developers to create extensions, or "add-ons", that can be installed in the browser without being distributed with it. In this way, new features can be prototyped and promoted outside the official architecture of the browser. Building on past projects, and taking advantage of Firefox's extendible nature, the Grafox extension adds new features to the browser. The aim is to raise the minimal set of features that authors can rely on across browsers, so that more content can be more useful.

The functionality that Grafox adds to Firefox includes the following.

Declarative Animation

Since the Adobe SVG Viewer supported declarative animation, there is a good deal of content out there that uses it. Until recently, though, this has not been well-supported in other SVG implementations. A few years ago, I wrote a simple JavaScript library called SmilScript, which, when referenced from a file, finds many of the most common declarative animations in that file and creates scripted equivalents, clientside. since then, both Opera and Batik have added support for declarative animation, and Firefox has indicated that it may do so in the next release. In the meantime, I have adapted SmilScript to work on any SVG file automatically via the Grafox Add-On, removing the need for the author to include it.

Zoom, Pan, and Resize

While most interactive SVG implementations allow the user to zoom in and out of SVG images, or to pan them, the user interface designers at Mozilla have declined to do so in Firefox. The rationale has been that common users cannot differentiate between raster and vector-graphic images, and that to maintain a consistent user interface, there should not be a way to zoom or pan SVG images. However, there are Firefox extensions that allow a limited type of "zooming" of raster images, which changes the size of the image. Grafox includes its own raster-resizing functionality, and unifies the behavior, as much as possible, with SVG-specific zooming and panning, in order to demonstrate the usefulness of this functionality as a whole, and to create demand among users.

Experimental Features

Although Mozilla has not expressed interest in implementing SVG 1.2, there are key pieces of funtionality from that version that I feel would greatly benefit Firefox's SVG implemention, and bring it in line with other UAs.

Text

By far one of the most requested features for SVG is auto-wrapped text, and SVG 1.2 specifies this. Grafox includes a simple implementation of this, and will convert of any 'textArea' element into a 'text' element with nested 'tspan' elements; the content will be split according to the 'width' attributes of the 'textArea' with respect to the font size, and will be styled appropriate to the properties. Another commonly desired feature, especially for the creation of form controls, is editable text, and as specified in SVG 1.2, Grafox adds this funtionality.

Fragment Focus

In SVG 1.1, the specification for how to deal with fragment identifiers (the "#myId" in "http://www.example.com/myFile.svg#myId") was not very useful, and did not align to the expected behavior as is common in HTML browsers; specifically, it did not bring the element in question into view. This was rectified in SVG 1.2, and Grafox serves as an proof-of-concept for this new behavior.

Download

v0.1 (very buggy, for the curious only... better to wait a few days for an update.)

Instructions and Examples

Watch this space.