I'm using a Raphael.js on my site. Take a look logo in the header, please. http://hooche.ru/md2 Code for logo:
<script type="text/javascript">
window.onload = function() {
var r = Raphael(logo); r.attr({href: "http://google.com/", target: "blank"});
other vector..
...
</script>
and html-code for logo^
<div id="logo"></div>
But now, we have: 1 letter = 1 Google link = very much Google links and empty, not clickable spaces around letters in one svg-logo.
How to do: 1 svg-logo = 1 link to somewhere with no empty spaces, for example, div logo have:
width: 190px;
height: 67px;
Replace your div with a link, then you won't need the r.attr()
bit either.
<a id="logo" href="http://google.com/"></a>
(I would not advise using target="_blank"
there. It's not the standard behaviour. Let the end user choose.)