A Constraint Extension to Scalable Vector Graphics Greg J. Badros Jojada J. Tirtowidjojo Kim Marriott Bernd Meyer Will Portnoy Alan Borning May 1-5,2001,Hong Kong. ACM

Introduction SVG is not enough SVG background CSVG (constraint scalable vector graphic) Implementation Performance Conclusion Future work

SVG is not enough It does not provide for flexible layout given different viewer and browser capabilities,such as screen format and font preferences. –EX. Format.X rignt + horiz_spacing <= DataFormat.X left –ExampleExample

SVG is not enough(Cont.) Interactive manipulation –Semantic zooming (Example)Example –Differential scaling –Semantic preserving manipulation (Example)Example Animation –We can also make these properties dependent on a timer variable.

SVG is not enough(Cont.) Extending SVG— main technical contribution: –A motivation for using constraints and alternative layouts for a wide class of SVG diagrams –A description of Constraint Scalable Vector Graphics as an extension of SVG –A prototype implementation of a CSVG viewer based on the CSIRO SVG viewer

SVG BACKGROUND Basic: – Animate: – < animate atrributeName=“x” atrributeType=“XML” begin=“0s” dur=“0s” fill=“freeze” from=“20” to=“120” /> Example

CSVG (constraint scalable vector graphic) Four extensions to the SVG language: –We store all SVG standard element attributes in predefined constraint variables and support identifier in addition to literal. –Six predefined variable based on it’s id : rectA_x; rectA_y; rectA_width; rectA_height; rectA_rx; rectA_ry Constraint variables may also be declared explicitly by using a new var element.

CSVG (Cont.) –Add another new element type called constraint Require attribute rule Optional attribute strength =50” strength=“strong” />

CSVG (Cont.) –Add several built-in read-only constraint variables. Viewport_width Viewport_height

CSVG (Cont.) –Added alternate layouts for groups of SVG elements. docase gcase Example Layout example(109 constraints)Layout example Interactive example(185 constraints)Interactive example Animation example(30 constraints)Animation example

Implementation CSVG DTD –Children of SVG group elements(svg,g),add elements: Var Constraint Docase Constraint Solving engine Architecture of implementation

PERFORMANCE Class hierarchy example –266ms Abacus example –485ms –Moving a bead — 16ms Machine: –Pentium II 450MHz –Java 1.2 with the Hotspot virtual machine

CONCLUSION Constraint-based graphics documents are difficult to author No authoring environments for generating CSVG

FUTURE WORK Could support referencing other elements’ attributes directly. To better describe the semantics of SVG in terms of constraints and constraint hierarchy theory.