Other examples Interactive expanding/collapsing tree diagram Clicking nodes in the tree alters the value of a CSVG variable which in turn changes the visibility and positions of other nodes. Table-based UI widget layout The table layout is achieved using constraints generated by the XSLT definition of the grid custom element. Simple graph Each node and arc is created using custom elements with XSLT definitions. <c:variable name="horizontal" value="c:width(c:viewport()) >= $boxWidth * 3 + $desiredGap * 2 + $margin * 2"/> <c:variable name="boxWidth" value="c:max($t1w, $t2w, $t3w) + $boxPadding * 2"/> <c:variable name="boxHeight" value="c:max($t1h, $t2h, $t3h) + $boxPadding * 2"/> <c:variable name="b1x" value="c:if($horizontal, $margin, c:width(c:viewport()) div 2 - $boxWidth div 2)"/> <c:variable name="b1y" value="c:if($horizontal, c:height(c:viewport()) div 2 - $boxHeight div 2, $margin)"/>...other box coordinate variables (b2x, b2y, b3x, b3y)......other text coordinate variables (t2x, t2y, t3x, t3y)......other text dimension variables (t2w, t2h, t3w, t3h)... XML file...other boxes and arrows... <c:variable name="horizontal" value="c:width(c:viewport()) >= $boxWidth * 3 + $desiredGap * 2 + $margin * 2"/> <c:variable name="boxWidth" value="c:max($t1w, $t2w, $t3w) + $boxPadding * 2"/> <c:variable name="boxHeight" value="c:max($t1h, $t2h, $t3h) + $boxPadding * 2"/> <c:variable name="b1x" value="c:if($horizontal, $margin, c:width(c:viewport()) div 2 - $boxWidth div 2)"/> <c:variable name="b1y" value="c:if($horizontal, c:height(c:viewport()) div 2 - $boxHeight div 2, $margin)"/>...other box coordinate variables (b2x, b2y, b3x, b3y)......other text coordinate variables (t2x, t2y, t3x, t3y)......other text dimension variables (t2w, t2h, t3w, t3h)... XML file...other boxes and arrows... Why is it needed? > SVG 1.1 supports only simple adaptation to viewing environment > Linear scaling to fit the viewport not always appropriate > Internationalisation via switch element is primitive > User CSS stylesheets could cause problems with the layout, e.g. by specifying different font sizes > Scripting is required if serious adaptation is to take place > A declarative means of specifying adaptation would be superior With CSVG one can easily create documents that adapt to > Canvas size > User CSS preferences > Internationalised text > The result of user interaction or direct manipulation Features of CSVG > Uses XPath 1.0 expressions > Backwards compatible SMIL-like syntax > Automatic dependency tracking > Constraints propagated in real time > Custom elements defined using XSLT + constraints > Minimises the need for layout script Implementation status > CSVG implemented as an extension to Apache's Batik > Implementation supports constraints on all animatable attributes and properties > Pure ECMAScript version of constraint extensions under development, for use in other SVG browsers What is Constraint SVG? Constraint SVG (CSVG) is an extension to SVG 1.1 that supports expression-based attribute specification. Its SMIL-like syntax allows document authors to use XPath expressions to determine the values of SVG element attributes and CSS properties. Constraint SVG Cameron McCormack, Kim Marriott, Bernd Meyer School of Computer Science and Software Engineering, Monash University 2 A simple example Here is a simple example of a diagram that adapts to canvas size and text size. resize 1 3 $horizontal == true $horizontal == false 4 Text positioning The text of each box is centered in its corresponding rectangle. 3 Horizontal or vertical If there is enough space to lay out the three boxes horizontally then $horizontal == true. This variable dictates the values the box coordinate variables will take. 1 Box width and height For all three boxes to have the same dimensions and to be large enough to fit the biggest text label, the $boxWidth and $boxHeight variables compute the maximum text dimensions based on the bounding boxes of the text elements. 2 Constraints on SVG objects The constraints on the relevant attributes of the SVG objects that make up the boxes and arrows simply refer to the variables defined previously. 4 Project website: