# Figma SVGs and Property Editor

**URL:** <https://forum.inductiveautomation.com/t/figma-svgs-and-property-editor/91945>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [June 17, 2024, 12:44pm UTC](https://forum.inductiveautomation.com/t/figma-svgs-and-property-editor/91945 "2024-06-17T12:44:52Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [June 17, 2024, 2:19pm UTC](https://forum.inductiveautomation.com/t/figma-svgs-and-property-editor/91945/6 "2024-06-17T14:19:20Z")

</div>

There is actually a full explanation about how to do this (completely within Ignition no third party software needed) here:

> [@Perspective, faster page](https://forum.inductiveautomation.com/t/perspective-faster-page/69885/35):
>
> Okay, I had a bit of free time today, so here is a complete SVG solution. You could do the Label as SVG text as well, or a gauge needle if you wanted, I haven't gone that far. Just a little example of the power of using the Ignition Designer to add SVG elements. I didn't include the label for the example. Note: All of this (outside of the calculations needed to find the points for the shape) was done inside of the designer (yes I can be somewhat of a masochist at times. rofl). First a s…

However, for the TL:DR (not really much of one really) 🤣

In that post, I use a script transform, which works well, but the same can be done with an expression (all be it a little ugly). The advantage is, an expression will be more performant.

(I don't have you're full path, so this is the path from my previous post)

```python
if({this.custom.value} = 100,
    //True Return default if value = 100
    "M0.7963 165.436 A150 150 0 1 1 299.2037 165.436 A10 10 0 1 1 " +
    "279.2567 164.4069 A130 130 0 1 0 20.7433 164.4039 A10 10 0 1 1 " +
    "0.7963 165.436",
    //False Return check if value = 0
    if( {this.custom.value} = 0,
        //True Return default if value = 0
        "M0.7963 165.436 A10 10 0 1 1 20.7433 164.4039 A10 10 0 1 1 0.7963 165.436",
        //False Return use calculated outside and inside stops
        toStr( 150 - 150 * cos(toRadians((200 * {this.custom.value} / 100) - 15))) + " " +
        toStr( 150 - 150 * sin(toRadians((200 * {this.custom.value} / 100) - 15))) + " A10 10 0 1 1 " +
        toStr( 150 - 130 * cos(toRadians((200 * {this.custom.value} / 100) - 15))) + " " +
        toStr( 150 - 130 * sin(toRadians((200 * {this.custom.value} / 100) - 15))) + " A130 130 0 " +
        if ( {this.custom.value} >= 95, "1 0 ", "0 0") +
        "20.7433 164.4039 A10 10 0 1 1 0.7963 165.436"
        )
    )

```

Honestly, that can be cleaned up significantly if you move the calculations out to properties of their own. For instance:

posRadians: `toRadians((200 * {this.custom.value} / 100 ) - 15)`  
outsideStopX: `150 - 150 * cos({this.custom.posRadians})`  
outsideStopY: `150 - 150 * sin({this.custom.posRadians})`  
insideStopX: `150 - 130 * cos({this.custom.posRadians})`  
insideStopY: `150 - 130 * sin({this.custom.posRadians})`

Then the main expression looks like:

```python
if({this.custom.value} = 100,
    //True Return default if value = 100
    "M0.7963 165.436 A150 150 0 1 1 299.2037 165.436 A10 10 0 1 1 " +
    "279.2567 164.4069 A130 130 0 1 0 20.7433 164.4039 A10 10 0 1 1 " +
    "0.7963 165.436",
    //False Return check if value = 0
    if( {this.custom.value} = 0,
        //True Return default if value = 0
        "M0.7963 165.436 A10 10 0 1 1 20.7433 164.4039 A10 10 0 1 1 0.7963 165.436",
        //False Return use calculated outside and inside stops
        toStr({this.custom.outsideStopX}) + " " +
        toStr({this.custom.outsideStopY}) + " A10 10 0 1 1 " +
        toStr({this.custom.insideStopX}) + " " +
        toStr({this.custom.insideStopY}) + " A130 130 0 " +
        if ( {this.custom.value} >= 95, "1 0 ", "0 0") +
        "20.7433 164.4039 A10 10 0 1 1 0.7963 165.436"
        )
    )

```

Note that you need to determine which direction to "close" the final arc dependent upon the value. In my case the break over threshold was 95% yours may be different.

---

_[View the full topic](https://forum.inductiveautomation.com/t/figma-svgs-and-property-editor/91945)._