# Perspective: Forcing embedded SVG to fill or resize with same aspect ratio to bounding box **URL:** \ **Category:** Ignition\ **Tags:** ignition80, perspective\ **Created:** [September 15, 2020, 1:00am UTC](https://forum.inductiveautomation.com/t/perspective-forcing-embedded-svg-to-fill-or-resize-with-same-aspect-ratio-to-bounding-box/38681 "2020-09-15T01:00:47Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [September 15, 2020, 1:00am UTC](https://forum.inductiveautomation.com/t/perspective-forcing-embedded-svg-to-fill-or-resize-with-same-aspect-ratio-to-bounding-box/38681/1 "2020-09-15T01:00:47Z")
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. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/0/40bde892a05b5c3b631d1c3e82a2656098a95feb.png) SVG: ![Tank_ConeTop_01a](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/3/33473bae25d5854e4be6bc86246a9b6009bee1a9.svg) ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [September 15, 2020, 3:21am UTC](https://forum.inductiveautomation.com/t/perspective-forcing-embedded-svg-to-fill-or-resize-with-same-aspect-ratio-to-bounding-box/38681/2 "2020-09-15T03:21:47Z")
`viewBox: 0 0 100 100`? ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [September 15, 2020, 3:36am UTC](https://forum.inductiveautomation.com/t/perspective-forcing-embedded-svg-to-fill-or-resize-with-same-aspect-ratio-to-bounding-box/38681/3 "2020-09-15T03:36:48Z")
Hmm, that sort of works; the vector resizes now, but it doesn’t fill the bounding box: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/c/1c929be92d3b07d6ceb05a555490874ea1f97eab.png) ---
**Author:** ![Sanderd17](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sanderd17/32/8735_2.png) [@Sanderd17](https://forum.inductiveautomation.com/u/Sanderd17)\ **Post date:** [September 15, 2020, 6:07am UTC](https://forum.inductiveautomation.com/t/perspective-forcing-embedded-svg-to-fill-or-resize-with-same-aspect-ratio-to-bounding-box/38681/4 "2020-09-15T06:07:36Z")
_You should set the [`preserveAspectRatio`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio) to the scaling you want._ Edit, sorry, it’s already set to none, which should scale ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [September 15, 2020, 3:16pm UTC](https://forum.inductiveautomation.com/t/perspective-forcing-embedded-svg-to-fill-or-resize-with-same-aspect-ratio-to-bounding-box/38681/5 "2020-09-15T15:16:57Z")
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. ---
**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\ **Post date:** [September 15, 2020, 4:17pm UTC](https://forum.inductiveautomation.com/t/perspective-forcing-embedded-svg-to-fill-or-resize-with-same-aspect-ratio-to-bounding-box/38681/6 "2020-09-15T16:17:33Z")
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. ---
**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\ **Post date:** [September 15, 2020, 4:35pm UTC](https://forum.inductiveautomation.com/t/perspective-forcing-embedded-svg-to-fill-or-resize-with-same-aspect-ratio-to-bounding-box/38681/7 "2020-09-15T16:35:56Z")
Yeah, you just need the viewBox defined. If you just update the viewBox prop in ignition it should work with ratio set to none. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/e/1e5815da9556d2bca40a46c3f507d8eb8a0e3544.png) 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. ![test](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/4/e4519908f8c7332cef93f7b2f3495366e26901bc.svg) ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [September 15, 2020, 8:01pm UTC](https://forum.inductiveautomation.com/t/perspective-forcing-embedded-svg-to-fill-or-resize-with-same-aspect-ratio-to-bounding-box/38681/8 "2020-09-15T20:01:26Z")
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 ---
**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\ **Post date:** [September 15, 2020, 9:05pm UTC](https://forum.inductiveautomation.com/t/perspective-forcing-embedded-svg-to-fill-or-resize-with-same-aspect-ratio-to-bounding-box/38681/9 "2020-09-15T21:05:47Z")
> [@Recommendations for svg editor](http://forum.inductiveautomation.com/t/recommendations-for-svg-editor/29303/8): > > I’ve been using “Optimized SVG” in Inkscape to preserve gradients, then use @heybales advice to resize and embed the image. [image] [image] ---
**Author:** ![franklepkowski](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/franklepkowski/32/4808_2.png) [@franklepkowski](https://forum.inductiveautomation.com/u/franklepkowski)\ **Post date:** [July 8, 2021, 3:43pm UTC](https://forum.inductiveautomation.com/t/perspective-forcing-embedded-svg-to-fill-or-resize-with-same-aspect-ratio-to-bounding-box/38681/10 "2021-07-08T15:43:17Z")
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 ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [July 8, 2021, 9:06pm UTC](https://forum.inductiveautomation.com/t/perspective-forcing-embedded-svg-to-fill-or-resize-with-same-aspect-ratio-to-bounding-box/38681/11 "2021-07-08T21:06:00Z")
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