SVG scaled differently on different browsers

Question

I need to have my svg within div's as follows:

<div style="height:100px; width: 300px; border:1px solid red;" >
    <div style="width: 100%; height: 100%; display: table;">
        <div style="display:table-row; height:100%">
            <div style="position: relative; vertical-align: middle; height:100%;">
                <div style="vertical-align: middle; position: relative; margin: 0px auto; height:100%;">
                    <svg viewBox="0 0 485 255" id="damageCanvas" style="vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1" fill="rgba(124,240,10,0.5)" height="100%" width="100%">    
                            <g transform="translate(1,1)">
                                <rect stroke="black" stroke-width="1.5" width="99.5%" height="99.5%" fill-opacity="0" style="padding: 2px 2px 2px 2px"></rect>                    
                            </g>                        
                    </svg>
                </div>
            </div>
        </div>
    </div>
</div>

The problem is that the following SVG is rendered in different browsers in different ways. Chrome: enter image description here

Firefox:

enter image description here

IE 9:

enter image description here

I want the image to be scaled as in chrome version. How can i achieve this?

Fiddle: http://jsfiddle.net/Sq5bL/5/

I want it to scale with the parent div. `overflow: hidden` would crop it. — janith, Sep 28 '12 at 12:35
Thanks for the clarification. Then my suggestion is indeed not applicable. — Stan, Sep 28 '12 at 12:39
Possibly [this answer](http://stackoverflow.com/questions/4737243/fit-svg-to-the-size-of-object-container) can be helpful? — Stan, Sep 28 '12 at 13:00

score 2 · Accepted Answer · edited Sep 30 '12 at 00:07

2

You can save your SVG in a file and use it as a resource, via <img> or <embed>. I've used both and it scales nicely. <img> stops you from accessing the SVG, so if you need access to the SVG then I would recommend using <embed>.

In my case I did:

<embed id="gaugeSpeed" class="gaugeImage" width="200" height="200" type="image/svg+xml" src="assets/gauges/speed.svg">

and it scaled it nicely. Same for when I use SVG with the <img> tag. I've tested on Transformer Prime and Nexus 7 running both ICS and Jellybean, works fine.

Should work fine with your parent div as well, as it's just treated like a normal img or object.

Well, since you would like to keep your SVG... your problem is caused by the use of the

display: table

on the second div. If you change that to a table-cell or remove it then your problem is resolved.

This is a JSFiddle that shows it working with table-cell

edited Sep 30 '12 at 00:07

dain

6,475
1
38
47

answered Sep 29 '12 at 04:28

Metalskin

3,998
5
37
61

Thanks for the answer, but my svg is generated dynamically by JS. So i cannot add it a file – janith Sep 29 '12 at 14:41
1

@janith I've edited my answer to include a solution that lets you keep your SVG. Hopefully that's enough info to let you go forward with your problem. – Metalskin Sep 30 '12 at 00:01
Thanks again. Yes removing `display: table` worked. I wanted `display: table` to achieve some other styling requirements. But it seems that removing it will be the easiest. Displaying as a table-cell doesn't seem to work however. Here is the working fiddle with `display: table` removed: http://jsfiddle.net/Sq5bL/12/ – janith Sep 30 '12 at 07:16
it is now many years later, 2023. and just for the record, I have a similar problem. However embedding the svg in a file did not work at all for me. Just saying. – Sandi Laufenberg-Deku Aug 22 '23 at 00:56

SVG scaled differently on different browsers

1 Answers1