220 likes | 309 Vues
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
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.