CODEWITHSUNDEEP
svg
xdhmoore
xdhmoore

Reputation: 9876

SVG image tag not working in Firefox or IE

The following SVG <image> tag is not displaying anything in Firefox 25 or IE10. It does work in Chrome. What am I doing wrong, here?

test.html

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script type="text/javascript">
    </script>
  </head>
  <body>
    <svg width="4in" height="3in" version="1.1" viewBox="0 0 500 500"
        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image x="50" y="50" width="100px" height="100px" xlink:href="test.svg"></image>
    </svg>
  </body>
</html>

test.svg

<svg xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="463.85715"
   height="375.28571"
   id="svg2">
  <g
     id="layer1">
    <rect
       width="462.85715"
       height="374.28571"
       x="145.71429"
       y="80.933617"
       id="rect2985"
       style="fill:#ff0000;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
  </g>
</svg>

Upvotes: 1

Views: 593

Answers (1)

xdhmoore
xdhmoore

Reputation: 9876

The problem was that the root element in the svg file needed a viewBox attribute. That's what I get for removing Inkscape's code from the test case I was working on...

Upvotes: 1

Related Questions