Hey there, I've encountered an issue with svg...
Currently, I'm utilizing the modernizr script as a backup for older IE versions to switch the svg to a png extension.
The hiccup I'm facing is that I'm using widths to manage the svg sizes:
<img src="img/testing.svg" width="200px">
(although in the future I'll be setting the width in CSS for media queries to allow it to scale up and down)
Right now, I have this modernizr script in place:
if(!Modernizr.svg) {
$('img[src*="svg"]').attr('src', function() {
return $(this).attr('src').replace('.svg', '.png');
});
}
Initially, it was working perfectly when I tested it in IE and it was swapping out the images without any issues. However, I did observe that if the png is "200px wide" and I've specified the svg version to be "400px wide" in my CSS - it's scaling up the png and causing blurriness.
My question is, how can I prevent the png from scaling up beyond its original size to avoid pixelation?
Or, is there a more efficient way to handle svg's and png fallbacks?
Thank you