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.