Svg image does not show in Firefox

html image firefox svg opera
Alexandru Chirila picture Alexandru Chirila · Jul 17, 2013 · Viewed 22k times · Source

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

Paul LeBeau picture Paul LeBeau · Jul 18, 2013

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

Related questions

Firefox show broken images

In firefox a broken image appears as just a blank white space. On a white background there is no way to distinguish between no image and a broken image. This makes identifying broken images difficult to recognise and makes them …

Read More
How do I auto-resize an image to fit a 'div' container?

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio? Example: stackoverflow.com - when an image is inserted onto the editor panel and the image …

Read More
How to display Base64 images in HTML?

I'm having trouble displaying a Base64 image inline. Can someone point me in the right direction? <!DOCTYPE html> <html> <head> <title>Display Image</title> </head> <body> &…

Read More