Svg image does not show in Firefox

Question

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>

Answer 1

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(?).

Answer 2

Your knight is 45 x 45 pixels in size. The top left corner (10 x 10) pixels is blank.

You are asking for the image to be displayed for that top left corner in the <image> markup so Firefox correctly shows nothing because there's nothing there.

If you want to see the knight, make the <image> width and height 45 to match the underlying knight.svg dimensions.

Neither Chrome nor Opera seem to display the image correctly

An ‘image’ element establishes a new viewport for the referenced file as described in Establishing a new viewport. The bounds for the new viewport are defined by attributes ‘x’, ‘y’, ‘width’ and ‘height’