Scale SVG image without aspect ratio

Question

Is it possible to fit the svg image to its full size without maintaining the aspect ratio? In the below example,

<img style="position: absolute; top: 12px; left: 31px; z-index: 1; width: 196px; height: 265px; " src="/media/images/logo.svg" />

The svg image is centered adding some transparent spaces along its sides. If I increase the size of the image, the svg image increases proportionally but does not take the entire space, instead the transparent space increases in size. Is there a way to allow the svg image to occupy the entire space?

Thanks and Regards,

Neha

Answer 1

I solved the same problem with help of this article. The important part for you would be:

In order to prevent the uniform scaling of our SVG graphic we need to add the preserveAspectRatio attribute with the value of "none".

So open your SVG file in text editor and add attribute preserveAspectRatio="none" to <svg> tag. Like:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">