Today I made a start on figuring out the best way to put linked SVG logos on web page. The test document was a new HCMC logo comprising the UVic shield and the HCMC name. This is what I had to do to the SVG image:

• Create a group for each part of the logo, to make it linkable.
• (In Inkscape) right-click on the group, and choose Create Link.
• Right-click again, and choose Link Properties.
• Fill in the @xlink:href, @xlink:title, and @target attributes. If you don't include @target="_top", then the link will replace the SVG image with the linked page. That's usually not what you want.
• Create white boxes (in this case, because the image BG is white) over the top of each group; link them in a similar way, and then send them to the bottom. If you don't do this, the link only work when the mouse is over the actual content of the element (the text, in this case); in between letters, there's no link.
• In the root SVG element, set @viewBox="0, 0, [width], [height]", where [width] and [height] are the original @width and @height attribute values from the same element.
• Add @preserveAspectRatio="xMinYMin meet" to the root <svg> element.
• Set the @width and @height attributes of the root <svg> element to the pixel values you want the image to show up with. These are naked integers (no 'px' or other units). (This is unfortunately necessary.)
• Clean any cruft you can out of the SVG file. I was able to remove some old @style attributes which had font info in them, even though the text had already been converted to paths.

That's it for the SVG. Now, to insert it into the page. In this case, I wanted it centred, which proved annoyingly tricky.

• Create a <div> element with width and height set to the desired pixel-width of the image (as already specified in the SVG file), in the @style attribute, and also include margin-left: auto and margin-right: auto.
• Create an <object> tag inside it, with the same width and height settings, with the @type attribute set to "image/svg+xml" and the @data attribute pointing at the SVG file.
• Include some appropriate fallback content in the <object> tag, in case the image can't be displayed.

The results (for the Map of London project footer) look like this:

  <div style="text-align: center; margin-left: auto; margin-right: auto; width: 237px; height: 40px;">
    <object type="image/svg+xml" data="images/hcmc_logo_linked.svg" style="width: 237px; height: 40px;">
    <a href="http://hcmc.uvic.ca/">
      <img src="images/hcmc_logo.gif" alt="Humanities Computing and Media Centre" width="163" height="39" /></a>      
      <a href="http://www.uvic.ca">
      <img src="images/uvic_logo.gif" alt="University of Victoria" width="104" height="40" /></a>
    </object>
  </div>

This is tested and working on Firefox, Safari, Opera, IE9 and Chrome. Chrome has a bug which changes the linked bit into a black square once it's "visited", but that's a known webkit bug which has just been fixed, so Chrome should inherit the fix soon.