Search code examples
htmlimagefirefoxsvgopera

Svg image does not show in Firefox

Inside a simple SVG element I have an image.

  • Chrome: Version 28. - works perfect
  • Firefox: 22.0 - no image is drawn
  • Opera: 12.16 - image is show 4 times larger than normal

Code:

    <svg width="500px" height="500px" viewBox="0 0 70 70">
         <image x="0" y="0" width="10" height="10" 
               id="knight" xlink:href="/images/knight.svg" />
    </svg>
Solution

  • Your SVG is not being scaled to fit your 10x10 image rectangle because it has no viewBox. SVG renderers need to know the dimensions of the SVG content in order to know how to scale it. That is what the viewBox attribute is for.

    Try adding the following to the root <svg> element in knight.svg.

      viewBox="0 0 45 45"

    Also, you need to define your namespaces for svg and xlink. Although perhaps you have just removed those for clarity(?).