A Constraint Extension to Scalable Vector Graphics ¡ ¡ ¡ Greg J. Badros Jojada J. Tirtowidjojo Kim Marriott Bernd Meyer ¢ Will Portnoy ¢ Alan Borning InfoSpace, Inc., 2801 Alaskan Way, Suite 200 Seattle, WA 98121, USA [email protected] ¡ School of Computer Science and Software Engineering, Monash University, Clayton, Victoria 3168, Australia £ jojada, marriott, berndm ¤ @mail.csse.monash.edu.au ¢ Dept. of Computer Science and Engineering, University of Washington, Box 352350, Seattle, WA 98195-2350, USA £ will,borning ¤ @cs.washington.edu Abstract mats such as GIF, JPEG, and PNG, which store a matrix of in- Scalable Vector Graphics (SVG) is a language that describes dividual pixels that compose an image, an SVG image contains two-dimensional vector graphics for storage and distribution instructions for resolution independent rendering, so that the on the Web. Unlike raster image formats, SVG-based im- same SVG file can be shown in more detail when viewed at a ages scale nicely to arbitrary resolutions and sizes. However, higher resolution. SVG files are also more compact than raster the current SVG standard provides little flexibility for tak- images, easier to process and analyze, integrate well with Cas- ing into account varying viewing conditions, such as differ- cading Style Sheets (CSS) [10] and can make full use of the ent screen formats, and there is little support for interactive Document Object Model (DOM) [2]. Given these advantages, exploration of a diagram. We introduce an extension to SVG SVG is increasingly well supported by both commercial and called Constraint Scalable Vector Graphics (CSVG) that per- free software. mits a more flexible description of figures. With CSVG, an image can contain objects whose positions and other proper- 1.1 SVG is not enough ties are specified in relation to other objects using constraints, Although the SVG format is a huge step forward for many rather than being specified in absolute terms. For example, a kinds of images, we can do even better for diagrammatic il- box can be specified to remain inside another box, without be- lustrations. In particular, SVG does not provide for flexible ing given an absolute position. The precise layout can then be layout given different viewer requirements and browser capa- left to the browser, which can adapt it dynamically to changing bilities, such as screen format and font preferences. Moreover, viewing conditions on the client side. Further extensions add the support for interaction and animation in SVG is very lim- support for alternate layouts, interaction, and declarative ani- ited. In this paper we demonstrate how extending SVG with mation. Leveraging well-established methods for linear con- constraints provides the basis for improving these aspects, thus straint solving, we implemented a prototype viewer for CSVG significantly enhancing the flexibility of SVG. This is a mod- by embedding our Cassowary constraint solver into an existing ular extension to SVG that ensures upward compatibility with SVG renderer. the original format. Keywords: constraints, differential scaling, semantic zoom- A constraint is a declarative specification of a re- ing, interaction, CSVG, SVG, Scalable Vector Graphics. lationship that we wish to hold true. For example, “Format appears to the left of DateFormat” is a con- straint. We can write the constraint mathematically as: ¦ ¨ ¥ ¦ 1. INTRODUCTION ¥ Format right § horiz spacing DateFormat left. In this The Scalable Vector Graphics (SVG) language [16] is a lan- constraint, we only specify the properties we wish to hold, guage based on XML [11] developed by the World Wide Web but do not give concrete values, or an explicit method (an Consortium for describing two dimensional vector graphics algorithm) for making the properties hold. The task of finding for storage and distribution on the Web. SVG can dramatically appropriate values is delegated to a constraint solver that is improve graphics on the Web. In contrast to raster image for- used during rendering. For example, assume that we want to display a part of the Java object hierarchy (Figure 1), but we want different lay- outs to be used in different viewing conditions so as to convey the information as clearly as possible. In a landscape format, we may want to use a diagram such as Figure 2, whereas a portrait format would be better served by the layout of Fig- ure 3. Although these diagrams look very different, they have the same logical (topological) structure and semantics. Using Copyright is held by the author/owner. WWW10, May 1-5, 2001, Hong Kong. SVG alone for this purpose presents a problem, because we ACM 1-58113-348-0/01/0005. are required to give absolute positions and sizes for the graph- 1.2 Interactive manipulation & animation As another example, consider the Local Area Network (LAN) topology diagrams shown in Figure 4. The network, shown in Figure 4(a), connects three different buildings — A, B, and C — via a site-wide backbone. Shrinking the whole diagram uniformly may cause buildings A, B, and C to become too small to display their internal details. By using an alternative presentation for each of the buildings we can support a more powerful form of resizing. Figure 4(b) shows a possible result. Zooming that preserves the semantic presentation of the LAN topology diagram but changes its Figure 1: SVG image diagramming the object hierarchy appearance is called semantic zooming. Java.Text.Format for the class. The SVG source for this Semantic zooming in combination with user interaction can image appears in Figure 5. allow viewers to explore a diagram interactively, selecting sub- components they wish to see in detail and hiding the details of other sub-components. Of course the diagram layout must change dynamically, preserving connections and also effec- tively utilizing the available screen space. We would also like SVG to provide a form of zooming that we term differential scaling. (Both semantic zooming and dif- ferential scaling are kinds of focus+context techniques [31].) In contrast to uniform scaling, differential scaling enables us to enlarge a part of a diagram to see more detail, while simultane- ously shrinking another part, so that the overall screen area for the diagram is kept constant. This capability clearly involves Figure 2: CSVG rendering of the Format class hierarchy scaling various parts of the figure differently. An important inside a wide and short viewport. application of this non-uniform scaling is to the sizing of text in diagrams. A sight-impaired user, for instance, may want to shrink the overall size but to increase text font size in la- bels. As an example, see Figure 4(c), which contains the same ics objects. The only flexibility that SVG allows is uniform graphical components as Figure 4(a) but with an increased text scaling of the entire graphic. size for labels and smaller boxes. Note that this means differ- Another limitation of SVG is that it provides little direct ent line breaking for the text in the labels. support for interactive exploration of a diagram. In particu- We would also like viewers to be able to change the lay- lar, the static nature of SVG forces authors to write scripts if out of objects in the diagram interactively, without changing they wish to maintain the layout relationships of objects in the its semantic content or logical structure. Users should thus be diagram automatically, for example, when an object in the di- restricted to performing semantics preserving manipulations. agram is manipulated interactively. This task is tedious, com- For example, Figure 4(d) shows a resized and rearranged di- plicated, and tightly coupled to the specific illustration. The agram of the local area network example. Here, the system new layout ideally should be generated automatically by the preserves the connection information when the user extends browser based on a more abstract layout specification. the width of building C’s bounding rectangle and interactively moves the LAN segment boxes as well as the repeater circle. The idea of interactive manipulation and exploration of a diagram naturally generalizes to an interaction metaphor in which the viewer uses the diagram as a simulation of some physical artifact and can explore “what-if” scenarios by direct manipulation and other interaction, as in the original ThingLab system [6]. In section 3.2, we discuss an interactive abacus. The same principle can be further generalized to provide constraint-based animation [14]. In addition to making the properties of some graphical objects dependent on the prop- erties of other objects, and allowing the user to manipulate these properties interactively, we can also make these prop- erties dependent on a timer variable. Using a constraint that relates object properties to a time offset gives us an immediate way to specify trajectories and other animation properties. In section 3.3, we discuss a seesaw animation. Figure 3: CSVG rendering of the Format class hierarchy 1.3 Extending SVG inside a narrow and tall viewport. The above examples demonstrate how semantic zooming, differential scaling, semantics preserving manipulation, and Building B LAN Segment R © ATM Switch 2 ATM LAN Segment Switch LAN Line12 Line23 Bridge Segment 2 Line12 Line23 Building B © LAN Multiport ATM ATM LAN Segment R Segment Bridge Switch 1 Switch 3 ATM ATM LAN Switch Switch Segment Line14 Line34 LAN Segment 1 3 Building A ATM R Building A Switch 4 Line14 Line34 Bridge ATM LAN Segment Site-wide Backbone Switch R= Repeater 4 Building C Building C (a) Site-wide Backbone (b) Building B LAN Segment R ATM Building B Switch LAN LAN Segment R 2 Segment ATM LAN Segment Line12 Switch 2 Line23 Bridge LAN Segment LAN ATM ATM LAN Line12 Line23 Bridge Multiport LAN Segment Segment Switch Switch R Bridge Segment 1 3 LAN Multiport ATM ATM LAN Segment R Segment Bridge Switch 1 Switch 3 LAN Segment LAN Line14 Line34 Segment LAN Building A ATM Segment Line14 Line34 R Switch Building A ATM LAN Segment LAN Segment 4 Bridge Switch 4 R LAN Bridge Site-wide Segment R= Repeater Site-wide Backbone Backbone R= Repeater Building C Building C (c) (d) Figure 4: Various diagrams of a local area network.