CODEWITHSUNDEEP
htmlimagefirefoxsvgopera
Alexandru Chirila
Alexandru Chirila

Reputation: 2352

Svg image does not show in Firefox

Inside a simple SVG element I have an image.

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>

Upvotes: 12

Views: 25551

Answers (2)

Robert Longson
Robert Longson

Reputation: 124229

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’

Upvotes: 2

Paul LeBeau
Paul LeBeau

Reputation: 101918

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

Upvotes: 8

Related Questions