<?xml version="1.0" encoding="utf-8"?>
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:rx="http://www.renderx.com/XSL/Extensions">
<!-- ============================================================ -->
<!--                                                              -->
<!-- 	This file makes a part of RenderX XSL Test Suite          -->
<!--                                                              -->
<!--    Author: Alexander Peshkov                                 -->
<!--                                                              -->
<!--    (c) RenderX, 2003                                         -->
<!--                                                              -->
<!-- ============================================================ -->
   <fo:layout-master-set>
      <fo:simple-page-master master-name="document-master" margin="0.4in">
         <fo:region-body margin="20pt" padding="0pt"/>
      </fo:simple-page-master>
   </fo:layout-master-set>
   <fo:page-sequence master-reference="document-master">
      <fo:flow flow-name="xsl-region-body" padding="6pt">
   
  
         <fo:block font="bold 16pt Helvetica" space-before="16pt" space-after="16pt" text-align="center" span="all">Create SVG in XSL FO programmatically. Usecase #1: tree-like structures</fo:block>
  
         <fo:block font-size="12pt" space-before="6pt" space-after="6pt" text-align="justify" text-indent="16pt">
    XSL FO allows you to embed different types of graphic in your documents.
    One of such types is SVG:
    <fo:block font-size="12pt" font-style="italic" space-before="6pt" space-after="6pt">
      
               <fo:basic-link external-destination="url(http://www.w3.org/Graphics/SVG/Overview.htm8)" color="#0000C0" text-decoration="underline">Scalabe Vector Graphics (SVG)</fo:basic-link>
    
            </fo:block>
  
         </fo:block>
  
         <fo:block font-size="12pt" space-before="6pt" space-after="6pt" text-align="justify" text-indent="16pt"> 
    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.
  </fo:block>
  
         <fo:block font-size="12pt" space-before="6pt" space-after="6pt" text-align="justify" text-indent="16pt">
    Below we will demonstrate one of possible usecases – creation of SVG representation 
    of tree-like structure from XML data.  This document contains sentence analysis in the form
    of the following XML:
    <fo:block white-space="pre" font-family="monospace">
        &lt;S&gt;
          &lt;NP&gt;
            &lt;Det&gt;The&lt;/Det&gt;
            &lt;NP&gt;
              &lt;Adj&gt;quick&lt;/Adj&gt;
              &lt;NP&gt;
                &lt;Adj&gt;brown&lt;/Adj&gt;
                &lt;N&gt;fox&lt;/N&gt;
              &lt;/NP&gt;
            &lt;/NP&gt;
          &lt;/NP&gt;
          &lt;VP&gt;
            &lt;V&gt;jumps&lt;/V&gt;
            &lt;PP&gt;
              &lt;Prep&gt;over&lt;/Prep&gt;
              &lt;NP&gt;
                &lt;Det&gt;a&lt;/Det&gt;
                &lt;NP&gt;
                  &lt;Adj&gt;lazy&lt;/Adj&gt;
                  &lt;N&gt;dog&lt;/N&gt;
                &lt;/NP&gt;
              &lt;/NP&gt;
            &lt;/PP&gt;
          &lt;/VP&gt;
        &lt;/S&gt;
    </fo:block>
  
         </fo:block>
  
         <fo:block font-size="12pt" space-before="6pt" space-after="6pt" text-align="justify" text-indent="16pt">  
    Dedicated XSLT stylesheet produces both textual (bracket structure) and graphical (tree-like)
    representation of this data as shown below.
    XSLT stylesheet contains a number of templates, which matches elements mentioned above and produce 
    SVG elements (placed in appropriate SVG namespace <fo:wrapper font-family="monospace">xmlns:svg="http://www.w3.org/2000/svg"</fo:wrapper>)
    such as lines and text labels.
    As example, SVG code fragment produced by stylesheet cited below:
    <fo:block white-space="pre" font-family="monospace">
    &lt;fo:instream-foreign-object width="100%"
                                content-width="scale-to-fit"
                                content-height="100%"&gt;
      &lt;svg:svg width="270pt"
               height="170pt"
               viewBox="0 0 270 160"&gt;
          ...
        &lt;svg:text style="font-family:Helvetica; font-size:10"
                  text-anchor="middle"
                  x="135" y="20"&gt;S&lt;/svg:text&gt;
        &lt;svg:line style="stroke-width:2; stroke: darkred; stroke-linecap: round"
                  x1="135" y1="23" x2="60" y2="30"/&gt;
          ...
      &lt;/svg:svg&gt;
    &lt;/fo:instream-foreign-object&gt;
    </fo:block>
  
         </fo:block>
  
         <fo:block font="bold 12pt Helvetica" space-before="10pt" space-after="10pt" text-align="left" keep-with-next="always">Sentence analysis</fo:block>
  
         <fo:block font-size="12pt" space-before="6pt" space-after="6pt" text-align="justify" text-indent="16pt">
    
            <fo:block xmlns:svg="http://www.w3.org/2000/svg" font="bold 12pt Helvetica" space-before="16pt" space-after="16pt">
			Sentence1:</fo:block>
            <fo:block xmlns:svg="http://www.w3.org/2000/svg">
      
        The
        
          quick
          
            brown
            fox
          
        
      
      
        jumps
        
          over
          
            a
            
              lazy
              dog
            
          
        
      
    </fo:block>
            <fo:block xmlns:svg="http://www.w3.org/2000/svg" font="bold 12pt Helvetica" space-before="16pt" space-after="16pt">Bracket structure:</fo:block>
            <fo:block xmlns:svg="http://www.w3.org/2000/svg" text-align="start">[[<fo:inline font-style="italic">The</fo:inline>
               <fo:inline font-size="75%" baseline-shift="super">Det</fo:inline>[<fo:inline font-style="italic">quick</fo:inline>
               <fo:inline font-size="75%" baseline-shift="super">Adj</fo:inline>[<fo:inline font-style="italic">brown</fo:inline>
               <fo:inline font-size="75%" baseline-shift="super">Adj</fo:inline>
               <fo:inline font-style="italic">fox</fo:inline>
               <fo:inline font-size="75%" baseline-shift="super">N</fo:inline>]<fo:inline font-size="75%" baseline-shift="super">NP</fo:inline>]<fo:inline font-size="75%" baseline-shift="super">NP</fo:inline>]<fo:inline font-size="75%" baseline-shift="super">NP</fo:inline>[<fo:inline font-style="italic">jumps</fo:inline>
               <fo:inline font-size="75%" baseline-shift="super">V</fo:inline>[<fo:inline font-style="italic">over</fo:inline>
               <fo:inline font-size="75%" baseline-shift="super">Prep</fo:inline>[<fo:inline font-style="italic">a</fo:inline>
               <fo:inline font-size="75%" baseline-shift="super">Det</fo:inline>[<fo:inline font-style="italic">lazy</fo:inline>
               <fo:inline font-size="75%" baseline-shift="super">Adj</fo:inline>
               <fo:inline font-style="italic">dog</fo:inline>
               <fo:inline font-size="75%" baseline-shift="super">N</fo:inline>]<fo:inline font-size="75%" baseline-shift="super">NP</fo:inline>]<fo:inline font-size="75%" baseline-shift="super">NP</fo:inline>]<fo:inline font-size="75%" baseline-shift="super">PP</fo:inline>]<fo:inline font-size="75%" baseline-shift="super">VP</fo:inline>]<fo:inline font-size="75%" baseline-shift="super">S</fo:inline>
            </fo:block>
            <fo:block xmlns:svg="http://www.w3.org/2000/svg" font="bold 12pt Helvetica" space-before="16pt" space-after="16pt">Tree structure:</fo:block>
            <fo:block xmlns:svg="http://www.w3.org/2000/svg">
               <fo:instream-foreign-object width="100%" content-width="scale-to-fit" content-height="100%">
                  <svg:svg width="270pt" height="170pt" viewBox="0 0 270 160">
                     <svg:text style="font-family:Helvetica; font-size:10" text-anchor="middle" x="135" y="20">S</svg:text>
                     <svg:text style="font-family:Helvetica; font-size:10" text-anchor="middle" x="60" y="40">NP</svg:text>
                     <svg:line style="stroke-width:2; stroke: darkred; stroke-linecap: round" x1="135" y1="23" x2="60" y2="30"/>
                     <svg:text style="font-family:Helvetica; font-size:10" text-anchor="middle" x="15" y="60">Det</svg:text>
                     <svg:line style="stroke-width:2; stroke: darkred; stroke-linecap: round" x1="60" y1="43" x2="15" y2="50"/>
                     <svg:line style="fill:none; stroke-width:1; stroke: blue; stroke-dasharray: 1 2; stroke-linecap: round" x1="15" y1="63" x2="15" y2="130"/>
                     <svg:text style="font-family:Times; font-style:italic; font-size:10" text-anchor="middle" x="15" y="140">The</svg:text>
                     <svg:text style="font-family:Helvetica; font-size:10" text-anchor="middle" x="75" y="60">NP</svg:text>
                     <svg:line style="stroke-width:2; stroke: darkred; stroke-linecap: round" x1="60" y1="43" x2="75" y2="50"/>
                     <svg:text style="font-family:Helvetica; font-size:10" text-anchor="middle" x="45" y="80">Adj</svg:text>
                     <svg:line style="stroke-width:2; stroke: darkred; stroke-linecap: round" x1="75" y1="63" x2="45" y2="70"/>
                     <svg:line style="fill:none; stroke-width:1; stroke: blue; stroke-dasharray: 1 2; stroke-linecap: round" x1="45" y1="83" x2="45" y2="130"/>
                     <svg:text style="font-family:Times; font-style:italic; font-size:10" text-anchor="middle" x="45" y="140">quick</svg:text>
                     <svg:text style="font-family:Helvetica; font-size:10" text-anchor="middle" x="90" y="80">NP</svg:text>
                     <svg:line style="stroke-width:2; stroke: darkred; stroke-linecap: round" x1="75" y1="63" x2="90" y2="70"/>
                     <svg:text style="font-family:Helvetica; font-size:10" text-anchor="middle" x="75" y="100">Adj</svg:text>
                     <svg:line style="stroke-width:2; stroke: darkred; stroke-linecap: round" x1="90" y1="83" x2="75" y2="90"/>
                     <svg:line style="fill:none; stroke-width:1; stroke: blue; stroke-dasharray: 1 2; stroke-linecap: round" x1="75" y1="103" x2="75" y2="130"/>
                     <svg:text style="font-family:Times; font-style:italic; font-size:10" text-anchor="middle" x="75" y="140">brown</svg:text>
                     <svg:text style="font-family:Helvetica; font-size:10" text-anchor="middle" x="105" y="100">N</svg:text>
                     <svg:line style="stroke-width:2; stroke: darkred; stroke-linecap: round" x1="90" y1="83" x2="105" y2="90"/>
                     <svg:line style="fill:none; stroke-width:1; stroke: blue; stroke-dasharray: 1 2; stroke-linecap: round" x1="105" y1="103" x2="105" y2="130"/>
                     <svg:text style="font-family:Times; font-style:italic; font-size:10" text-anchor="middle" x="105" y="140">fox</svg:text>
                     <svg:text style="font-family:Helvetica; font-size:10" text-anchor="middle" x="195" y="40">VP</svg:text>
                     <svg:line style="stroke-width:2; stroke: darkred; stroke-linecap: round" x1="135" y1="23" x2="195" y2="30"/>
                     <svg:text style="font-family:Helvetica; font-size:10" text-anchor="middle" x="135" y="60">V</svg:text>
                     <svg:line style="stroke-width:2; stroke: darkred; stroke-linecap: round" x1="195" y1="43" x2="135" y2="50"/>
                     <svg:line style="fill:none; stroke-width:1; stroke: blue; stroke-dasharray: 1 2; stroke-linecap: round" x1="135" y1="63" x2="135" y2="130"/>
                     <svg:text style="font-family:Times; font-style:italic; font-size:10" text-anchor="middle" x="135" y="140">jumps</svg:text>
                     <svg:text style="font-family:Helvetica; font-size:10" text-anchor="middle" x="210" y="60">PP</svg:text>
                     <svg:line style="stroke-width:2; stroke: darkred; stroke-linecap: round" x1="195" y1="43" x2="210" y2="50"/>
                     <svg:text style="font-family:Helvetica; font-size:10" text-anchor="middle" x="165" y="80">Prep</svg:text>
                     <svg:line style="stroke-width:2; stroke: darkred; stroke-linecap: round" x1="210" y1="63" x2="165" y2="70"/>
                     <svg:line style="fill:none; stroke-width:1; stroke: blue; stroke-dasharray: 1 2; stroke-linecap: round" x1="165" y1="83" x2="165" y2="130"/>
                     <svg:text style="font-family:Times; font-style:italic; font-size:10" text-anchor="middle" x="165" y="140">over</svg:text>
                     <svg:text style="font-family:Helvetica; font-size:10" text-anchor="middle" x="225" y="80">NP</svg:text>
                     <svg:line style="stroke-width:2; stroke: darkred; stroke-linecap: round" x1="210" y1="63" x2="225" y2="70"/>
                     <svg:text style="font-family:Helvetica; font-size:10" text-anchor="middle" x="195" y="100">Det</svg:text>
                     <svg:line style="stroke-width:2; stroke: darkred; stroke-linecap: round" x1="225" y1="83" x2="195" y2="90"/>
                     <svg:line style="fill:none; stroke-width:1; stroke: blue; stroke-dasharray: 1 2; stroke-linecap: round" x1="195" y1="103" x2="195" y2="130"/>
                     <svg:text style="font-family:Times; font-style:italic; font-size:10" text-anchor="middle" x="195" y="140">a</svg:text>
                     <svg:text style="font-family:Helvetica; font-size:10" text-anchor="middle" x="240" y="100">NP</svg:text>
                     <svg:line style="stroke-width:2; stroke: darkred; stroke-linecap: round" x1="225" y1="83" x2="240" y2="90"/>
                     <svg:text style="font-family:Helvetica; font-size:10" text-anchor="middle" x="225" y="120">Adj</svg:text>
                     <svg:line style="stroke-width:2; stroke: darkred; stroke-linecap: round" x1="240" y1="103" x2="225" y2="110"/>
                     <svg:line style="fill:none; stroke-width:1; stroke: blue; stroke-dasharray: 1 2; stroke-linecap: round" x1="225" y1="123" x2="225" y2="130"/>
                     <svg:text style="font-family:Times; font-style:italic; font-size:10" text-anchor="middle" x="225" y="140">lazy</svg:text>
                     <svg:text style="font-family:Helvetica; font-size:10" text-anchor="middle" x="255" y="120">N</svg:text>
                     <svg:line style="stroke-width:2; stroke: darkred; stroke-linecap: round" x1="240" y1="103" x2="255" y2="110"/>
                     <svg:line style="fill:none; stroke-width:1; stroke: blue; stroke-dasharray: 1 2; stroke-linecap: round" x1="255" y1="123" x2="255" y2="130"/>
                     <svg:text style="font-family:Times; font-style:italic; font-size:10" text-anchor="middle" x="255" y="140">dog</svg:text>
                  </svg:svg>
               </fo:instream-foreign-object>
            </fo:block>
  
         </fo:block>

      </fo:flow>
   </fo:page-sequence>
</fo:root>