stretching svg icon

[Diggerz]

Hi,

I have a plan that requires a few svg images to be stretched, this works ok with png images but i was wondering how this can be done with svg images. What additional class / css elements i would need to edit/create to stretch an svg icon to the full size of the object placed on the visu? at the moment svg images scale and maintain their aspect ratio, i want to be able to stretch the svg image. i had a read of this https://css-tricks.com/scale-svg/ but i havent had any success.

[admin]

You need to edit the SVG and make sure it does not have width/height properties in <svg> tag. Then you need to add preserveAspectRatio="none" to the <svg> tag. Similar to this but with original viewBox values from your SVG:

Code:

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

[Diggerz]

Thank you! its working perfectly, the stretched svg's look much nicer than the png's i was looking to use.