v8.0.15
How can I force an embedded SVG to increase in size with the size of its container? Either with or without maintaining aspect ratio.
SVG:
v8.0.15
How can I force an embedded SVG to increase in size with the size of its container? Either with or without maintaining aspect ratio.
SVG:
viewBox: 0 0 100 100
?
Hmm, that sort of works; the vector resizes now, but it doesnāt fill the bounding box:
You should set the preserveAspectRatio
to the scaling you want.
Edit, sorry, itās already set to none, which should scale
Whatās the source of your SVG? I am far from an expert in the SVG spec, but maybe the element is constrained in some way? There might be some hacking you could do there.
The svg file may have some blank space defined and itās weird that your viewBox prop is blank in the pic you posted. Setting viewBox to the correct dimensions and setting the preserveAspectRatio to ānoneā usually does the trick.
Just noticed the svg is posted, Iāll play around with it.
Yeah, you just need the viewBox defined. If you just update the viewBox prop in ignition it should work with ratio set to none.
Also,
I opened the svg file in notepad and it does not have the viewbox defined, hence ignition shows no values when it is imported. I opened it with Inkscape and resaved it (save asā¦ optimized svg) to clean up the file and to add the viewbox setting into the file. I attached the updated svg here so you can see the difference.
Awesome, thanks for the help all. I didnāt know you could get rid of all the Inkscape stuff in the file with Inkscape; good to know
Cheers
Hello All,
I have saved my SVG as Optimized. When i drag it onto a view in Perspective it gives me an option to embed or upload. If i just embed I can see the viewBox property but it does not render properly. If I upload I do not get the viewBox property. What am I missing?
Thanks,
Frank
Ignore the embed option, it will only frustrate you.
Set your embedded SVGās mode from MinXMinY (or whatever it is by default) to None, then it will occupy the entire bounding box. You may want to add the style vector-effect: non-scaling-stroke
as well so that the stroke doesnāt get stretched