Other examples

1. 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. <circleid="c" cx="100" cy="100" r="100"/> <rectwidth="200" height="200"> <c:constraint attributeName="x" value="id('c')/@cx"/> <c:constraint attributeName="y" value="id('c')/@cy"/> </rect> resize resize 1 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. 2 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. 3 Text positioning The text of each box is centered in its corresponding rectangle. 4 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. Constraint SVG Cameron McCormack, Kim Marriott, Bernd Meyer School of Computer Science and Software Engineering, Monash University Project website: http://www.csse.monash.edu.au/~clm/csvg/ 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 Other examples Simple graph Each node and arc is created using custom elements with XSLT definitions. <!-- horizontal: whether the layout is horizontal or vertical --> <c:variablename="horizontal" value="c:width(c:viewport()) >= $boxWidth * 3 + $desiredGap * 2 + $margin * 2"/> <!-- boxWidth: the width of the boxes --> <c:variable name="boxWidth" value="c:max($t1w, $t2w, $t3w) + $boxPadding * 2"/> <!-- boxHeight: the height of the boxes --> <c:variable name="boxHeight" value="c:max($t1h, $t2h, $t3h) + $boxPadding * 2"/> <!-- box coordinates --> <c:variablename="b1x" value="c:if($horizontal, $margin, c:width(c:viewport()) div 2 - $boxWidth div 2)"/> <c:variablename="b1y" value="c:if($horizontal, c:height(c:viewport()) div 2 - $boxHeight div 2, $margin)"/> ...other box coordinate variables (b2x, b2y, b3x, b3y)... <!-- text coordinates --> <c:variable name="t1x" value="$b1x + $boxWidth div 2"/> <c:variable name="t1y" value="$b1y + $boxHeight - $boxPadding"/> ...other text coordinate variables (t2x, t2y, t3x, t3y)... <!-- text dimensions --> <c:variable name="t1w" value="c:width(c:bbox(id('t1')))"/> <c:variable name="t1h" value="c:height(c:bbox(id('t1')))"/> ...other text dimension variables (t2w, t2h, t3w, t3h)... <!-- first box --> <rect id="b1" x="10" y="10" width="80" height="40"> <c:constraint attributeName="x" value="$b1x"/> <c:constraint attributeName="y" value="$b1y"/> <c:constraint attributeName="width" value="$boxWidth"/> <c:constraint attributeName="height" value="$boxHeight"/> </rect> <text id="t1" x="50" y="40"> <c:constraint attributeName="x" value="$t1x"/> <c:constraint attributename="y" value="$t1y"/> XML file </text> ...other boxes and arrows... A simple example Here is a simple example of a diagram that adapts to canvas size and text size. 1 2 $horizontal == true $horizontal == true $horizontal == false 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. 3 4 Table-based UI widget layout The table layout is achieved using constraints generated by the XSLT definition of the grid custom element.