This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.

stretching svg icon
#1
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.
Reply
#2
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">
Reply
#3
Thank you! its working perfectly, the stretched svg's look much nicer than the png's i was looking to use.
Reply


Forum Jump: