How can I insert a svg containing links in a xwiki page?

Context :

I have a svg graphics containing links to external pages. If I open it directly in Firefox or IE links correctly go to the other URLs.

I want to insert the graphics in a xWiki page. The trivial way : Image/Attached image... in wisiwig editor generates [[image:foo.svg||height="..." width="..."]] in xwiki 2.1 source but ... links are no longer clickable.

Question :

How can I insert the svg document in a way links in the svg are still active ?

Minimal example :

<svg  xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="0" y="0" height="130" width="120"
          style="stroke:#000000; fill: #ffffff"/>
    <rect x="10" y="10" height="50" width="100"
          style="stroke:#ff0000; fill: #0000ff"/>
    <a xlink:href="http://www.google.fr">
	<rect x="10" y="70" height="50" width="100"
	      style="stroke:#ff0000; fill: #00ff00"/>
    </a>
</svg>

As you can see the green rectangle at bottom contains a link to google. But when I insert it in a xwiki page, the link is not active. I looked at generated HTML, and saw that the svg is included with an <img> tag and I assume it is the reason why links are not active. But I could not find how to make it work

References :

I'm using a 6.4.4 version of xwiki and 2.1 xwiki syntax but I will accept a solution for version 7 or another syntax for xwiki pages

Solution

The issue is not with XWiki, but with the way browsers handle SVGs as the target of <img> tags. You can try in a simple HTML:

<html>
  <body>
    <image src="foo.svg"/>
  </body>
</html>

That won't be clickable either.

You can embed the SVG instead:

<html>
  <body>
    <svg  xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
      <rect x="0" y="0" height="130" width="120"
          style="stroke:#000000; fill: #ffffff"/>
      <rect x="10" y="10" height="50" width="100"
          style="stroke:#ff0000; fill: #0000ff"/>
      <a xlink:href="http://www.google.fr">
        <rect x="10" y="70" height="50" width="100"
              style="stroke:#ff0000; fill: #00ff00"/>
      </a>
    </svg>
  </body>
</html>

If you can copy the contents of the SVG file in the wiki document, then you can just use a {{html clean="false"}} wrapper around it:

Some **wiki content**

{{html clean="false"}}
<svg ....>
</svg>
{{/html}}

Some __other wiki content__.

If not, then you should do this instead:

Some **wiki content**

{{velocity}}
{{html clean="false"}}
$doc.getAttachment('foo.svg').getContentAsString('UTF-8')
{{/html}}
{{/velocity}}

Some __other wiki content__.