# Determining SVG viewBox property dynamically

**URL:** <https://forum.inductiveautomation.com/t/determining-svg-viewbox-property-dynamically/91106>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [May 29, 2024, 8:44pm UTC](https://forum.inductiveautomation.com/t/determining-svg-viewbox-property-dynamically/91106 "2024-05-29T20:44:57Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![msteele](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/msteele/32/77889_2.png) [@msteele](https://forum.inductiveautomation.com/u/msteele)\
**Post date:** [May 29, 2024, 8:44pm UTC](https://forum.inductiveautomation.com/t/determining-svg-viewbox-property-dynamically/91106/1 "2024-05-29T20:44:57Z")

</div>

As part of my quest to make our sites entirely auto-deployable from a common stack of projects, and based on some help from an esteemed forum member, I now have a component in our UI library that can take a tagPath and auto-generate a diagram with SVGs and ViewCanvas solely from the tag provider.

But the one thing I can't figure out how to do is pre-determine the height and width for the ensemble of components based on the size of content within the SVG. What I want is essentially the dimensions found in a SVG component's viewBox custom property upon embedding a SVG. But I want to calculate the height and width based on the SVG content coming in from a binding.

Does anyone know how Ignition determines the viewBox prop upon embedding a SVG, and if that is exposable at runtime? Or another way for me to determine the dimensions of bound SVG elements?

This would empower me to make this a generic card component that can be called in any context solely with a tagPath parameter.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/a/ba47f0a747d643f25ff9f0e85272d84e38f80643.png)

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [May 29, 2024, 8:57pm UTC](https://forum.inductiveautomation.com/t/determining-svg-viewbox-property-dynamically/91106/2 "2024-05-29T20:57:27Z")

</div>

I thought the viewbox was defined in the SVG?

---

<div class="post-metadata">

**Author:** ![msteele](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/msteele/32/77889_2.png) [@msteele](https://forum.inductiveautomation.com/u/msteele)\
**Post date:** [May 29, 2024, 9:02pm UTC](https://forum.inductiveautomation.com/t/determining-svg-viewbox-property-dynamically/91106/3 "2024-05-29T21:02:31Z")

</div>

Oh yeah, it's right there in the opening xml tag when it's actually xml, e.g.. `<svg width="1012" height="558" viewBox="0 0 1012 558" fill="none" xmlns="http://www.w3.org/2000/svg">`

Unfortunately this gets lost when we process it into lists of dictionaries for bindability in Ignition and document-formatted storage in the tag provider. But now I know where Ignition gets it 😃 and I can try to figure out a creative way to make it persist into the tag provider.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [May 29, 2024, 9:15pm UTC](https://forum.inductiveautomation.com/t/determining-svg-viewbox-property-dynamically/91106/4 "2024-05-29T21:15:12Z")

</div>

Instead of capturing just `props.elements`, capture the others too. When reading the doc tag, you get them all one layer deeper.