Perspective: Forcing embedded SVG to fill or resize with same aspect ratio to bounding box


How can I force an embedded SVG to increase in size with the size of its container? Either with or without maintaining aspect ratio.


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.

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 :slight_smile:

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?



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