Browsers always preserves aspect ratio when resizing raster image in SVG

It seems that all modern browsers are ignoring the non-proportioned scaling for raster image in SVG file. If you use Inkscape to resize an embeded/linked raster image in an SVG file, you will find that all browsers will render the raster image in the same aspect/dimention ratio as compare to the original image. Apparently only Inkscape and ASV could interpret non-proportioned raster image scaling.

Comparison was done between Inkscape and browsers in order to elaborate the problem, the IntegraXor logo was used as the raster image, and the blue frame which is the SVG element serves as the border line. The top left image is the original logo, the top right image has been resized in width which wasn’t interpret correctly in browsers, and the medium left image has been resized in height which is also wasn’t inperpreted correctly in browsers. Only the medium right image is rendered correctly in browsers when the image is resized with original aspect ratio.

Last but not least, the bottom image is also rendered correctly in browsers, whereby a trick has been apply by grouping the raster image and the SVG element before the dimension ratio is distorted. In another word, to circumvent this problem is to group the raster image with other SVG element and then scale it together. Otherwise the best thing to do is to avoid scaling or at least scale it in proportion by holding down Ctrl key, in ensuring WYSIWYG in browsers’ display.

The browser shown in the screenshot is Firefox 4.0. However all other browsers also affected, including IE 9.0.8112.16421 RTM(KB982861), Google Chrome 10.0.648.151, Safari 5.0.3 (7533.19.4) and Opera 11.10 Build 2092. Image showing aspect ratio will be always preserved by browsers.