Svg doesn't resize with css in ie9

Question

Good:

This is my web page: http://ingenious.jit.su/themes

If you view it in firefox, you will see that the upper right corner of each of the six white panels has a small red icon (svg). If you look at this image, you will notice that its initial size is 640 by 480. This is small because there is a css rule that changes the size of the img tag referenced by svg.

Here's the error: IE9 does not resize the icon in accordance with the css rule. It just cuts off the top left bit. If you configure the css rule using IE9 Developer Tools, you will see what I mean.

I dug up lots of lots and confirmed that I followed most of the best svg methods, for example, including width and height values ​​that are not only 100%, including the viewport, and so on, but no luck. IE9 still responds to the css rule by clipping instead of scaling.

Any help would swing!

Update Fixed! I'm dumb, my viewport is gone. No more coding at 3am.

Answer 1

Have you tied svg? Example

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> enter svg here </svg>

I had a lot of svg problems with ie9 ::

I got this error while viewing the page if this helps

SCRIPT438: Object does not support property or method 'addEventListener'
followbar.js, line symbol 3

here is the best example of the two points that i talked about in the comments

<img class="theme-icon" id="/recruitment-and-retention" src="../images/recruitment-and-retention.svg"/>