10.1 Image filters

The Scalable Vector Graphics format SVG is an XML-based format. Thus, Cascading Stylesheets (CSS) or Extensible Stylesheets (XSLT) can be used to modify an image. The embedding of stylesheets in SVG documents is explained in the SVG specifications located at the W3C web site ( http://www.w3c.org/Graphics/SVG). The following example comprises an SVG file exported by the TIGERGraphViewer. It illustrates how an Cascading Stylesheet is used to set the background color of an image to white:

<svg width="662" height="333">

  <style type="text/css">
    g[type="bgcolor"] > rect { fill:white }
  </style>

  <g type="sentence" id="s10">

    <!-- create background color -->
    <g type="bgcolor">
      <rect x="0" y="0" width="662" height="333" fill="grey"/>
    </g>

    <!-- terminal node "s10_1":[word="There" & pos="EX"] -->
    <g type="t" id="s10_1" match="subgraph" font-family="dialog" font-style="normal" font-weight="normal" font-size="14" fill="rgb(150,0,0)">
      <text x="55" y="276" text-anchor="middle">There</text>
      <text x="55" y="297" text-anchor="middle">EX</text>
    </g>
    ...

  </g>

</svg>

To develop your own Cascading Stylesheets, we recommend you to export an SVG example corpus graph which makes use of an image filter. The generated SVG file can be used to experiment with your stylesheet. The SVG specification supports Cascading Stylesheets Level 2 which are described in a W3C specification (cf. http://www.w3c.org/Style/CSS).

The integration of your own CSS stylesheets is quite simple. All stylesheets that are represented by image filters in the graphical user interface are listed in a file named tigersearch_svg.xml which is located in the config/ subdirectory of your TIGERSearch installation directory. The file looks like the following:

<svgfilter version="1.0">

  <filter name="black/white">
     text { fill:black }
     line,rect,ellipse { stroke:black }
     rect { fill:white }
     path { stroke:black }
  </filter>

  <filter name="white background">
    g[type="bgcolor"] > rect { fill:white }
  </filter>

</svgfilter>

To add your stylesheets, just insert a new <filter> element. Specify the stylesheet name by setting the value of the attribute name. Insert the stylesheet text as the element content of the new <filter> element.

Be aware of the XML element content conventions, e.g. use &lt; instead of < in the content of a <filter> element. Please also note that TIGERSearch has to be restarted in order to activate the new stylesheet configuration.