Rendering buttons and banners with SVG

The ability of using any background and rendering text with shadow on top is already a quite flexible approach to create buttons and banners but sometimes it might turn out to be still too restrictive since you can't get any effects on the text itself. Examples for this are glowing text as mouse-over effects on the buttons or lighting on the text of the banners.

To get these effects in XWeb you have to use SVG to render the images. SVG is an acronym for Scalable Vector Graphics, an XML based format to store drawing instructions and graphic filter effects. You can read about SVG on the W3C SVG pages. To get an impression what kind of effects you can create with SVG (and how) take a look at the filter effects section in the SVG specification, they have a nice example there.

Using SVG for <imageStyle>s in XWeb is quite easy. Instead of using the elements for the internal renderer like <background> and <text> you just insert an element <svg> which contains your SVG code. There are only small differences to SVG code in a separate file:

• the attributes width and height are not allowed on the <svg> element, they will be used from the <imageStyle> element
• an additional attribute xwebid can be used to tell XWeb to find a <text> element with this id to replace this text with the name or title of the entry or section

If you don't use the additional xwebid attribute you will get the same button all the time. Otherwise you have to give at least one <text> element in your SVG code which uses the same string as id attribute. The content of all these elements will be replaced with the name or title of the active section or entry.

Here is an example for a button using a blue glow around black text, base on the mouse-over effect in the homesite example that can be found in the distribution:

  <!-- the outer element is just the same as for the other renderer -->
  <imageStyle width="120" height="30" fileNamePattern="button_%n_mo.jpg" 
           type="buttonMouseOver">
    <!-- this is a normal svg element, but without dimensions and the extra attribute -->
    <svg xwebid="xweb" viewBox="1,1,120,30">
      <!-- this defines the glow effect -->
      <filter id="Glow" filterUnits="objectBoundingBox" x="-10%" y="-10%"
                width="150%" height="150%">
        <!-- make a slightly bigger version of the input alpha channel -->
        <feMorphology in="SourceAlpha" result="morphedAlpha" radius="0.5"
                  operator="dilate"/>
        <!-- blur this -->
        <feGaussianBlur in="morphedAlpha" result="blurredAlpha"
                  stdDeviation="0.5"/>
        <!-- create some blue color -->
        <feFlood result="flooded" style="flood-color:rgb(90,90,255);flood-opacity:0.5"/>
        <!-- mix the color with the resized and blurred alpha information -->
        <feComposite operator="in" in="flooded" in2="blurredAlpha"
                  result="coloredShadow"/>
        <!-- put the input on top of the result -->
        <feComposite in="SourceGraphic" in2="coloredShadow" operator="over"/>
      </filter>
      <!-- this creates the text, using the filter, the content will be replaced
           with the name of the page since its id attribute matches the xwebid
           for this image -->
      <text x="8" y="16" style="filter:url(#Glow);font-family:Marlett;font-size:14;
               stroke-width:0;stroke-opacity:1;stroke:rgb(0,0,0)
               fill-opacity:1;fill:rgb(0,0,0);opacity:1"
               id="xweb">oops</text>
    </svg>
  </imageStyle>

You can find more information on SVG and its capabilities, as well as information on existing tools to create SVG graphics on the W3C site linked above.