Determining SVG viewBox property dynamically

Ignition
1

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

1 Like
2

I thought the viewbox was defined in the SVG?

1 Like
3

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 :smiley: and I can try to figure out a creative way to make it persist into the tag provider.

4

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

1 Like