220 likes | 322 Views
This paper explores the limitations of SVG and introduces CSVG as an extension for more flexible layout options. The authors present Constraint Scalable Vector Graphics, offering interactive manipulation, semantic zooming, and differential scaling. They discuss the technical aspects of implementing CSVG and its performance benefits compared to standard SVG. The document also covers the difficulty of authoring constraint-based graphics and suggests future enhancements to improve constraint descriptions and hierarchy theory in SVG.
E N D
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.Xrignt + horiz_spacing <= DataFormat.Xleft • Example
SVG is not enough(Cont.) • Interactive manipulation • Semantic zooming (Example) • Differential scaling • Semantic preserving manipulation(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: • < rect x=“20” y=“10” width=“10” height=“5”/> • < path d=“M 20 10 L 30 10 L 30 15 L 20 15 Z”/> • Animate: • < rect x=“20” y=“10” width=“10” height=“5”/> < 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. • < rect id=“rectA” x=“20” y=“10” width=“square_edge” height=“square_edge” rx=“5” ry=“5”/> • 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 • < constraint rule=“square_edge >=50” strength=“strong” /> < rect id=“rectA” x=“20” y=“10” width=“square_edge” height=“square_edge” />
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) • Interactive example(185 constraints) • Animation example(30 constraints)
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.