383911 - Unable to resize a svg with specified width and height

Status: RESOLVED DUPLICATE of bug 353450

(Core :: SVG, defect)

Description

[Emmanuel Engelhart]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.4) Gecko/20061201 Firefox/2.0.0.4 (Ubuntu-feisty)
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.4) Gecko/20061201 Firefox/2.0.0.4 (Ubuntu-feisty)

I have an HTML page with an object tag to display a SVG picture. My SVG has specified width and height and It can not be resized within theI HTML page.

Reproducible: Always

Steps to Reproduce:
HTML :
========
<object type="image/svg+xml" data="Flag_of_Italy.svg" width="600" height="400"></object>
========

SVG file : 
========
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1500" height="1000" viewBox="0 0 3 2">
<rect width="1" height="2" fill="#008d46"/>
<rect width="1" height="2" x="1" fill="#ffffff"/>
<rect width="1" height="2" x="2" fill="#d2232c"/>
</svg>
========


Actual Results:  
Correctly sized object box, but with scrollbars, because the SVG content is not resized.

Expected Results:  
Correctly sized object box, without scrollbars and with a resized SVG content.

If I remove the width and heigth properties in the "svg" tag : 
========
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 3 2">
<rect width="1" height="2" fill="#008d46"/>
<rect width="1" height="2" x="1" fill="#ffffff"/>
<rect width="1" height="2" x="2" fill="#d2232c"/>
</svg>
========

It works !

Comment 2

[Robert Longson [:longsonr]]

You already seem to know the answer. Don't use width and height elements unless you want scrollbars.

Comment 3

[Emmanuel Engelhart]

I'm sorry, but I find this answer a little bit short.

Do you would answer to a guy with a too big bitmap (png, jpg)... the same : "It seems that you know the answer. Take your gimp or your photoshop and resize your picture."

If you look a little bit around, you will see that a lot of people have to fight with this problem.

Comment 4

[Robert Longson [:longsonr]]

Here's my longer answer then...

If you want scrollbars, use width and height attributes set to absolute values with a viewBox to specify which bit you want to see. If you want the image scaled to fit set the width and height to percentages (or omit them so they default to 100%) and don't use a viewBox.

If things were changed to scale to fit in all cases then those people who want to see part of a larger drawing with scrollbars would be asking how they get that effect.

Why should removing the width and height attributes in your svg be a problem?

I think images normally scale to fit don't they? Presumably if you want scrollbars  with images you put them in larger container and set it to overflow.

Comment 5

[Emmanuel Engelhart]

Thank you for this more detailed answer.

A remark, if I'm not wrong the "viewBox" parameter does not seem to influence the resizing ability of firefox, only the "width" and "heigth" parameter.

On a a pure theoretical point of view, I understand your opinion. But that does not match what user needs (to my opinion) because :

* Removing the width and height attributes in your SVG is as complicated as resizing a bitmap picture.
* a big part of the SVG files have a fixed width and height. It's maybe bad, but it is like that, and I do not see any reason to say it will change in a near future. Take a look to Wikipedia, which is certainly one of the web sites using intensively SVGs.
* People need an easy way to resize dynamically the SVGs files (width fixed witdth and height) like bitmap files in HTML. Take a look on Internet to see how many people are asking questions about this topic.
* I know nobody who need to have a SVG picture inside a smaller box with  scrollbars.

For these reasons, I think this behaviour does not match the web dev's needs. 

I'm not a CSS expert and my proposition is maybe bad, but I would propose that the css "overflow: scroll;" disabled this resizing and comes back to the current  behaviour.