# Vision: Flip SVG using Template Parameter

**URL:** <https://forum.inductiveautomation.com/t/vision-flip-svg-using-template-parameter/69318>\
**Category:** Ignition\
**Tags:** ignition81, vision\
**Created:** [February 1, 2023, 11:06pm UTC](https://forum.inductiveautomation.com/t/vision-flip-svg-using-template-parameter/69318 "2023-02-01T23:06:03Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Seth\_Kahle](https://avatars.discourse-cdn.com/v4/letter/s/eb9ed0/32.png) [@Seth\_Kahle](https://forum.inductiveautomation.com/u/Seth_Kahle)\
**Post date:** [February 1, 2023, 11:06pm UTC](https://forum.inductiveautomation.com/t/vision-flip-svg-using-template-parameter/69318/1 "2023-02-01T23:06:03Z")

</div>

I was trying to create a template from components that could be flipped / mirrored, but it's not possible to flip a template instance, and its not even possible to flip a component from the pallet.

So... if I make a template that consists of all drawings / SVGs, is it possible to group them, and the flip them inside of the template using a boolean parameter? This would avoid me having to maintain two templates of mirror image.

---

<div class="post-metadata">

**Author:** ![Gurjot\_Sandhu](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/gurjot_sandhu/32/38368_2.png) [@Gurjot\_Sandhu](https://forum.inductiveautomation.com/u/Gurjot_Sandhu)\
**Post date:** [February 8, 2023, 7:16pm UTC](https://forum.inductiveautomation.com/t/vision-flip-svg-using-template-parameter/69318/2 "2023-02-08T19:16:46Z")

</div>

Hi [Seth\_Kahle](https://forum.inductiveautomation.com/u/Seth_Kahle),

What I did was group all the drawings together in the template, and added a template property called Flip of boolean type. I then put an expression binding on the angle property of the group that uses an if statement to see if Flip is enabled and set the angle accordingly. Example:

> if({Flip.Flip}, 180, 0)

Angle of 0 and 180 flips horizontally, and 90 and 270 flips vertically. Depending on what the whole group looks like, this may not work how you want it to.

---

<div class="post-metadata">

**Author:** ![Seth\_Kahle](https://avatars.discourse-cdn.com/v4/letter/s/eb9ed0/32.png) [@Seth\_Kahle](https://forum.inductiveautomation.com/u/Seth_Kahle)\
**Post date:** [February 8, 2023, 8:39pm UTC](https://forum.inductiveautomation.com/t/vision-flip-svg-using-template-parameter/69318/3 "2023-02-08T20:39:33Z")

</div>

Unfortunately my drawings are not symmetrical, so the rotation makes the shape appear upside down.

I thought I might just put both shapes into one template and then show/hide based on a Boolean parameter, but that’s just as bad as maintaining two templates.

---

<div class="post-metadata">

**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:** [February 8, 2023, 9:26pm UTC](https://forum.inductiveautomation.com/t/vision-flip-svg-using-template-parameter/69318/4 "2023-02-08T21:26:40Z")

</div>

It would technically be possible to do this with a paintable canvas component; you could 'borrow' your other components, and ask them to draw inside the paintable canvas after applying an AffineTransform to rotate everything/flip the axis accordingly. As long as it's an exact flip, it should be more or less pixel perfect, though it will likely be somewhat of a CPU hit.

I don't have any code to share, but that might be enough to get you started.

---

<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:** [February 8, 2023, 10:03pm UTC](https://forum.inductiveautomation.com/t/vision-flip-svg-using-template-parameter/69318/5 "2023-02-08T22:03:57Z")

</div>

Would it be acceptable to embed multiple SVGs into the template that are already oriented in the correct manner, then simply show the correct one? A bit hacky and old school, but fairly easy to implement IMO.