Tim McLoone Tim McLoone - 3 months ago 36
React JSX Question

express svg image element rendering issue in safari/firefox

I'm building a react app on express 4, part of the app is a graph I'm building using d3. I having a problem with any images held within the svg tag on safari and firefox (but not chrome) eg:

<svg width="1373.6499999999999" height="250">
<g transform="translate(20,20)" >
<image href="/images/withdrawal.png" class="withdrawal" x="100.84925373134327" y="72.41613009407105" width="30" height="30">
</image></g></svg>


It essentially renders on the page where it should be but just blank:

enter image description here

I've tried with different file types and with full urls. I've tried different doctypes but that doesn't seem to be getting me anywhere.

There's lot of documentation out there about issues with the image tag not rendering on safari but as far as I can tell the closest thing that could be the problem is the content type header, which I haven't had any success with. I tried the svg outside of react and I still get the same problem.

I know as an alternative I could just append an img to the graph instead but I'd like to try and avoid that.

Answer

The href attribute of the <image> element is not part of the SVG namespace. It belongs to the XLink namespace instead. Therefore, you need to add the namespace declaration and prefix the attribute accordingly (most often seen as xlink:href). For your code this means:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="1373.6499999999999" height="250">
  <g transform="translate(20,20)" >
    <image xlink:href="/images/withdrawal.png" class="withdrawal" x="100.84925373134327" y="72.41613009407105" width="30" height="30">
    </image>
  </g>
</svg>