Photo Gallery in SVG

So here is the photo gallery application with all images replaced by SVG documents embedded via object elements. Clicking a thumbnail image invokes a function on the host document which, in turn, calls a function on the preview image. The HTML document is serving as a "mediator" between the SVG thumbnail and the SVG preview document, routing script function calls appropriately. See Figure 2.

Some More SVG Details

Looking at the SVG thumbnail code:

<svg version="1.1" ...>
  <g id="thumbnail" cursor="pointer"  
        onclick="if(gHtmlWin) {gHtmlWin.thumbnailClicked(gImgFilename); 
                 return false;}" >
    <rect id="blueborder" x="0" y="0" width="104" height="79" fill="blue"/>
    <image id="theThumbImage" class="thumb" x="2" y="2" width="100" 
              height="75"/>
   </g>
        </svg>

SVG uses the SVG g element to group logically related graphical elements. This is similar in concept to the HTML div element, allowing you to treat the group of elements as one in terms of styling, behavior, transformation, etc. Thus, the graphical elements rect and image are placed into a graphical group identified as "thumbnail".

Also notice that in order to achieve the blue border from the HTML application, we place a SVG rect element filled with blue underneath the raster graphic. SVG follows a "painter's model" in which elements are conceptually rendered in the order in which they are placed in the document. Since the blue rectangle exists earlier in the document and is slightly larger than the raster graphic, we see a thin border around the raster.

Notice that the graphical group that represents the thumbnail image has a cursor attribute which allows you to control what mouse cursor should be displayed when the pointer is over the element. The thumbnail also has an onclick handler which invokes the thumbnailClicked() function in the XHTML document.

Conclusion, first part

We've given a brief introduction to SVG, how to integrate SVG into existing HTML applications and how to script between the documents. We used SVG to achieve parity with our HTML application and set the stage for future exploration. In the next article we will be exploring ways that SVG can actually enhance applications by providing useful client-side functionality. This will start to answer the question of why we have bothered to integrate SVG in the first place.

• Next article—SVG Evolution 2: Our First Steps Into SVG

Pages: 1 2 3 print