+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: stretching svg icon (/showthread.php?tid=2795)
stretching svg icon - Diggerz - 17.08.2020
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.
RE: stretching svg icon - admin - 18.08.2020
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">RE: stretching svg icon - Diggerz - 18.08.2020
Thank you! its working perfectly, the stretched svg's look much nicer than the png's i was looking to use.