a constraint extension to scalable vector graphics greg j. badros jojada j. tirtowidjojo kim...
TRANSCRIPT
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_edg
e” />
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.