A constraint extension to scalable vector graphics

Abstract

Scalable Vector Graphics (SVG) is a language that describes two-dimensional vector graphics for storage and distribution on the Web. Unlike raster image formats, SVG-based images scale nicely to arbitrary resolutions and sizes. However, the current SVG standard provides little flexibility for taking into account varying viewing conditions, such as different screen formats, and there is little support for interactive exploration of a diagram. We introduce an extension to SVG called Constraint Scalable Vector Graphics (CSVG) that permits a more flexible description of figures. With CSVG, an image can contain objects whose positions and other properties are specified in relation to other objects using constraints, rather than being specified in absolute terms. For example, a box can be specified to remain inside another box, without being given an absolute position. The precise layout can then be left to the browser, which can adapt it dynamically to changing viewing conditions on the client side. Further extensions add support for alternate layouts, interaction, and declarative animation. Leveraging well-established methods for linear constraint solving, we implemented a prototype viewer for CSVG by embedding our Cassowary constraint solver into an existing SVG renderer.

Review of automatic document formatting

“…The second is layout on an unbounded number of fixed size pages and is typically used for print media and for PDF documents. 4 The third -vertical scroll layout -is layout on a single page of fixed width but unbounded height and is the standard model for viewing HTML and most web documents. The fourth model -horizontal scroll layout -is layout on a single page of fixed height but with unbounded width.…”

Towards a multimedia formatting vocabulary

“…In our example, a text-based formatter might insert a page break between the image and the caption, which would not yield the intended layout because it destroys the perceived relationship between the image and its caption. Fortunately, many other methods for higher level layout of media items have been proposed in the literature, such as the constraint-based multimedia layout of Madeus [14] and the constraint-based layout of SVG graphics described in [4]. In our multimedia formatting vocabulary, it is possible to layout media items using similar techniques (more details will follow in section 4).…”

“…The presentation is generated as a response to a query to an on-line database 4 . The database has retrieved six relevant media items of which four (title, text, caption, image) are visible in the screendump.…”

“…An on-line demo of the system and XSLT transformation sheets to transform HFOs to SMIL 2.0, SMIL 1.0 and HTML+TIME are also available from this location. 4 In this case a database that is based on the Dublin Core metadata provided by the Open Archives Initiative [16]. The metadata is used not only to find relevant texts and images in the database, but also to infer semantic relationships among the texts and images that can be used as a basis for a coherent multimedia presentation (see [17] for a more elaborate description of the use of Dublin Core for presentation generation).…”

Improving formatting documents by coupling formatting systems

“…The latter situation occurs when flexibility provided by the presentation language can allow multiple formatting solutions. Recently, some research has focused on the use of constraint techniques to avoid formatting failure, including CSVG [9] Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee.…”