Responsive labels for SVG's

Any suggestion on the best way to make labels on SVG’s responsive so they stay in the same place when resizing the screen?

For example I have a SVG of a machine with labels next to components to show temps and pressures etc. I used a flex view with the drawing inside a coordinate container set to percent with the thinking the label would stay fixed to its location regardless of the view size. But doesn’t quite work out that way. The easy way would be to make the svg / coordinate container a fixed size but that’s the easy way.

If the labels are part of the SVG then they will stay in the same place? What do you mean by responsive?

The label for example is Temp 75 F or Pressure 100 psi which is added ontop of the svg in the designer. Taken from mqtt with an expression like ‘Temp ’ + {value}+’ F’

Responsive as in if you change the screen size, the SVG will resize (which it does) but the labels don’t stay in the corresponding place, it all doesn’t scale accordingly. A perfect example is an extruder, the screw has 7 heat zones so the svg has arrows pointing to those zones, I then add the labels in designer. When you resize the screen, the labels no longer line up with the lines/arrows.

If its not possible I will just stick to fixed size but would be a nice touch if it all scaled in proportion.

Use percent mode and aspectRatio. If the view width is 1200 and height is 800, your aspectRatio will be 1200:800


That did the trick, thankyou so much.

1 Like