After researching from various sources, I have found that the vector-effect="non-scaling-stroke" attribute in SVG should work in the latest versions of Opera, Firefox, and Chrome (though unsure about IE10).
However, despite this information, I have only been able to get it to work in Opera and Firefox. Interestingly, it works when directly embedded as an image but fails when used as a background image in CSS.
Some questions arise:
Why does it not work in Chrome?
Why is it ineffective in background images?
Is there a standardized method to utilize this feature across all modern browsers?
Check out a fiddle example here.
HTML :
<div><img src="http://dl.dropbox.com/u/60476509/close.svg" /></div>
<div><img id="one" src="http://dl.dropbox.com/u/60476509/close.svg" /></div>
<div id="two"></div>
<div id="three"></div>
CSS :
#one {
width: 200px;
height: 200px;
}
#two {
background-image: url("http://dl.dropbox.com/u/60476509/close.svg");
height: 100px; /* native size */
width: 100px;
background-size: contain;
}
#three {
background-image: url("http://dl.dropbox.com/u/60476509/close.svg");
height: 200px;
width: 200px;
background-size: cover;
}