CODEWITHSUNDEEP
htmlfirefoxsvgscale
Fabien Snauwaert
Fabien Snauwaert

Reputation: 5631

SVG image inside of SVG does not scale in Firefox

I'm using an SVG inside of an HTML document, and using an external SVG file inside of said SVG. Like so:

<svg class="ipachart" width="500" height="350" viewBox="0 0 500 350" version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- In Firefox 38.0.5, the svg does not scale to fit the SVG. While it's fine in Chrome. -->
    <image x="0" y="0" width="100%" height="100%" xlink:href="https://www.dropbox.com/s/gtindax1177ewmx/Blank_vowel_trapezoid.svg?dl=1" />

    <!-- Using a PNG, it scales just fine in Firefox -->
    <!-- <image x="0" y="0" width="100%" height="100%" xlink:href="https://www.dropbox.com/s/w0i764blf4tbc4z/Blank_vowel_trapezoid.png?dl=1" /> -->

</svg>

JSfiddle

This works fine in Chrome and Safari. (I do not care for IE.)

The problem is that the SVG image does not scale to fit in Firefox (version 38.0.5). Instead of looking like this:

SVG scaling in Chrome

It looks like this (as if it wasn't scaling at all):

SVG not scaling in Firefox

If I use a PNG version in place of the SVG, it works like expected. Which makes me think it's a bug.

Should I file a bug report?

Upvotes: 3

Views: 3116

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

No. Because it looks to me like Firefox has the correct behaviour here.

The SVG you are linking to ("Blank_vowel_trapezoid.svg") has no viewBox attribute, so it should not / will not be scaled to fit your <img> bounds.

If anything you should file bugs against Chrome and IE.

If you want tthe SVG to scale. Add a viewBox to its root <svg> tag:

viewBox="0 0 1000 700"

and remove the width and height attributes.

Upvotes: 4

Related Questions