Alexander Peshkov Instream SVG in XSL FO: Diagrams Creates XSL FO document with embedded SVG graphic generated from arbitrary XML data. Shows one possible usecase of SVG usage – generation of a diagram based on numeric data stored in XML. 2003-07-22

XSL FO allows you to embed different types of graphic in your documents. One of such types is SVG: Scalabe Vector Graphics (SVG) Apart from common vector graphics advantages (such as no-loss quality and relatively small size for certain drawing types) SVG is an XML itself. Thus you can not only embed images produced by external applications, but create SVG programmatically from arbitrary XML data by means of XSLT. If you have some private data in XML you can present them both in textual and graphical forms using single stylesheet that produce XSL FO and SVG. In this test we will show yet another possible usecase that requires SVG creation "on the fly". While tabular form is very useful then representing numeric data it may be needed to produce it's graphical view in the form of diagram. SVG is a natural choice in this case. This document contains a set of numbers describing one-month history of temperature variations in Moscow. It is stored in the form of the following XML: <meteodata> <point date="1" min="0.8" avg="3.7" max="6.2"/> <point date="2" min="-0.6" avg="1.1" max="3.5"/> <point date="3" min="-4.0" avg="3.6" max="11.0"/> <point date="4" min="5.9" avg="9.1" max="13.5"/> <point date="5" min="8.7" avg="10.5" max="13.3"/> <point date="6" min="6.0" avg="8.4" max="12.4"/> <point date="7" min="2.0" avg="9.5" max="16.5"/> <point date="8" min="4.6" avg="12.2" max="18.8"/> <point date="9" min="7.2" avg="12.4" max="19.6"/> <point date="10" min="7.0" avg="9.9" max="13.3"/> <point date="11" min="1.5" avg="3.3" max="7.4"/> <point date="12" min="-2.3" avg="6.5" max="13.0"/> <point date="13" min="0.5" avg="10.8" max="17.4"/> <point date="14" min="11.6" avg="17.8" max="25.4"/> <point date="15" min="15.1" avg="20.4" max="25.7"/> <point date="16" min="5.1" avg="10.9" max="19.3"/> <point date="17" min="1.4" avg="10.0" max="18.0"/> <point date="18" min="4.8" avg="13.2" max="20.1"/> <point date="19" min="5.6" avg="15.5" max="22.3"/> <point date="20" min="14.0" avg="17.8" max="24.1"/> <point date="21" min="12.0" avg="19.6" max="27.8"/> <point date="22" min="15.9" avg="20.9" max="25.7"/> <point date="23" min="14.9" avg="18.1" max="22.8"/> <point date="24" min="13.1" avg="19.1" max="25.3"/> <point date="25" min="17.0" avg="23.5" max="30.1"/> <point date="26" min="16.1" avg="23.2" max="29.8"/> <point date="27" min="14.1" avg="22.7" max="31.0"/> <point date="28" min="14.9" avg="24.0" max="31.6"/> <point date="29" min="15.1" avg="24.2" max="31.6"/> <point date="30" min="17.5" avg="23.2" max="29.6"/> <point date="31" min="16.3" avg="23.5" max="29.5"/> </meteodata> From this data dedicated XSLT stylesheet produces both table and diagram as shown below. It draws svg:polyline translating numbers given by point elements into SVG coordinates. Note that SVG elements are placed in appropriate SVG namespace xmlns:svg="http://www.w3.org/2000/svg". As example, SVG code fragment produced by stylesheet cited below: <fo:instream-foreign-object> <svg:svg width="5in" height="5in" viewBox="-60 -500 700 800"> ... <svg:line x1="20" x2="20" y1="-62" y2="-8" style="stroke-width:6; stroke: blue; stroke-linecap: butt"/> <svg:line x1="15" x2="25" y1="-62" y2="-62" style="stroke-width:1; stroke: blue; stroke-linecap: butt"/> <svg:line x1="15" x2="25" y1="-8" y2="-8" style="stroke-width:1; stroke: blue; stroke-linecap: butt"/> ... </svg:svg> </fo:instream-foreign-object>