SVG scaled differently on different browsers - html

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:
Firefox:
IE 9:
I want the image to be scaled as in chrome version. How can i achieve this?
Fiddle: http://jsfiddle.net/Sq5bL/5/

Answer 1

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