1. 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

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

3. 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

4. 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.

5. 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

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

7. 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.

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

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

10. 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

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

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

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

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