# Tip: how to create SVGs and changing the fill color dynamically

**URL:** <https://forum.inductiveautomation.com/t/tip-how-to-create-svgs-and-changing-the-fill-color-dynamically/53361>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [November 22, 2021, 9:40pm UTC](https://forum.inductiveautomation.com/t/tip-how-to-create-svgs-and-changing-the-fill-color-dynamically/53361 "2021-11-22T21:40:14Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [November 22, 2021, 9:40pm UTC](https://forum.inductiveautomation.com/t/tip-how-to-create-svgs-and-changing-the-fill-color-dynamically/53361/1 "2021-11-22T21:40:14Z")

</div>

This may be helpful in creating custom symbols for perspective. SVGs allow changing of fill colors, etc., dynamically.

1. Create your SVG using your favourite program. In this example I’ve used Inkscape.

- Hit Ctrl-Shift-D to set the document properties and set the units and grid. I chose a 1 mm grid. Take a little care with this so that you can be consistent with your work.

 ![Perspective Inkscape pump step 1](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/a/3a8774cdf32e0f0b5157bd059f55ed0be81e33b7.png)

- Draw your symbol. Use the Z-order buttons to push objects back and forwards in the stack.
- Hit Ctrl-Shift-F to edit the fill and stroke of the objects. Pick a “wrong” color so that you can be sure your changes are working later in Ignition.
- Hit Ctrl-Shift-O to name the objects. The names you assign here will show up in Perspective.
- Select the objects and hit Ctrl-Shift-R to set the bounding box for the objects. This will crop the viewBox tight to the size of your graphic.
- Save As … plain SVG. (I didn’t test whether or not Perspective can handle Inkscapes SVG format which contains extra Inkscape info.)

1. Drag and drop the image using File Explorer onto a Perspective view.
2. Create a custom property. Here I’ve set the fill color using on of the theme colours.

![Perspective Inkscape pump step 2](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/6/b6213fd2e22c74934a1555f67c50ab225d6d57f8.png)

1. In step 3 in the image above create a binding to whatever will drive the color property. Note again that I’m using theme colors rather than hard code them.

 ![Perspective Inkscape pump step 3](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/e/be48f07edb8c99632a3b7e0871e20c462ce03b7b.png)

1. Finally, bind each of the SVG element’s fill properties to the custom property we set above. (You could skip the custom property completely but I think doing it this way means you only have to set it once at a high level.)

 ![Perspective Inkscape pump step 5](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/5/054a7ff5c608bdc189746fbf6317b0aaf6ce3f17.png)

I hope someone finds this useful.

---

<div class="post-metadata">

**Author:** ![swolnisty](https://avatars.discourse-cdn.com/v4/letter/s/7bcc69/32.png) [@swolnisty](https://forum.inductiveautomation.com/u/swolnisty)\
**Post date:** [November 23, 2021, 12:43am UTC](https://forum.inductiveautomation.com/t/tip-how-to-create-svgs-and-changing-the-fill-color-dynamically/53361/2 "2021-11-23T00:43:31Z")

</div>

Another option that might not be immediately obvious is to do this with style classes. Same concept: create a central binding point that will execute the logic of which style class(es) to use, create a “style” object within each element of the svg, add the “classes” property to the style element, and bind the value to your central style class logic. You will have to delete any fill or stroke properties that you do not want overridden from what is in your style class such as paint, width, or in my case I removed the stroke and fill objects entirely:

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

Also of note, only the “Shape” style class properties are going to apply here.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 23, 2021, 9:03am UTC](https://forum.inductiveautomation.com/t/tip-how-to-create-svgs-and-changing-the-fill-color-dynamically/53361/3 "2021-11-23T09:03:17Z")

</div>

Another useful option is to apply the style: `vector-effect: non-scaling-stroke` which will keep your stroke the same width no matter the scaling of the SVG. Unfortunately this needs to be applied to every element

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [November 23, 2021, 10:33am UTC](https://forum.inductiveautomation.com/t/tip-how-to-create-svgs-and-changing-the-fill-color-dynamically/53361/4 "2021-11-23T10:33:43Z")

</div>

Thanks for your tip. I’ve got it working on the “Pumping” label in the gif below but can’t get it to work on the circle fill.

![Perspective pumping](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/2/5273d8d0947027eff196fa82f30fc3af032eaa2f.gif)

Both are using the _pumping_ style class and if I set the whole object’s style | classes to _pumping_ the circle’s box background flashes green.

Can you see what’s wrong with my setup? (I notice I have a second level of _elements_ and that you don’t.)

Links:

- [How to Create a Flashing Component - Ignition User Manual 8.1 - Ignition Documentation](https://docs.inductiveautomation.com/display/DOC81/How+to+Create+a+Flashing+Component).

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 23, 2021, 11:35am UTC](https://forum.inductiveautomation.com/t/tip-how-to-create-svgs-and-changing-the-fill-color-dynamically/53361/5 "2021-11-23T11:35:41Z")

</div>

What’s in your `pumping` style? To style SVG fills, you need to use the shape.fill\*\* (edited) in the Style (not background-color)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 23, 2021, 11:42am UTC](https://forum.inductiveautomation.com/t/tip-how-to-create-svgs-and-changing-the-fill-color-dynamically/53361/6 "2021-11-23T11:42:12Z")

</div>

or fill instead of backgroundcolor

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 23, 2021, 11:43am UTC](https://forum.inductiveautomation.com/t/tip-how-to-create-svgs-and-changing-the-fill-color-dynamically/53361/7 "2021-11-23T11:43:44Z")

</div>

I think that’s probably what I meant, but in the Style dialogue it’s stashed under “Shape”

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 23, 2021, 11:47am UTC](https://forum.inductiveautomation.com/t/tip-how-to-create-svgs-and-changing-the-fill-color-dynamically/53361/8 "2021-11-23T11:47:11Z")

</div>

ah i never have rly used the style dialogue thingy xd expect to open background image for injection xD

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 23, 2021, 11:48am UTC](https://forum.inductiveautomation.com/t/tip-how-to-create-svgs-and-changing-the-fill-color-dynamically/53361/9 "2021-11-23T11:48:12Z")

</div>

You don’t use Perspective Styles then?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 23, 2021, 11:51am UTC](https://forum.inductiveautomation.com/t/tip-how-to-create-svgs-and-changing-the-fill-color-dynamically/53361/10 "2021-11-23T11:51:07Z")

</div>

The style classes? i guess i do, guess my co)workers made the basic ones. And i only make them for the weird hacky styles xd

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [November 23, 2021, 1:51pm UTC](https://forum.inductiveautomation.com/t/tip-how-to-create-svgs-and-changing-the-fill-color-dynamically/53361/11 "2021-11-23T13:51:48Z")

</div>

Yes, setting the Style | Class shape fill solved the problem. Thanks!

---

<div class="post-metadata">

**Author:** ![swolnisty](https://avatars.discourse-cdn.com/v4/letter/s/7bcc69/32.png) [@swolnisty](https://forum.inductiveautomation.com/u/swolnisty)\
**Post date:** [November 23, 2021, 4:53pm UTC](https://forum.inductiveautomation.com/t/tip-how-to-create-svgs-and-changing-the-fill-color-dynamically/53361/12 "2021-11-23T16:53:50Z")

</div>

Haha, I probably should have been a little more clear with the last line of my reply, but @nminchin wrote what I meant.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 23, 2021, 7:34pm UTC](https://forum.inductiveautomation.com/t/tip-how-to-create-svgs-and-changing-the-fill-color-dynamically/53361/13 "2021-11-23T19:34:57Z")

</div>

Oh, I completely missed the last line of your reply 😄

---

<div class="post-metadata">

**Author:** ![tupanaster](https://avatars.discourse-cdn.com/v4/letter/t/5daacb/32.png) [@tupanaster](https://forum.inductiveautomation.com/u/tupanaster)\
**Post date:** [February 27, 2022, 7:33pm UTC](https://forum.inductiveautomation.com/t/tip-how-to-create-svgs-and-changing-the-fill-color-dynamically/53361/14 "2022-02-27T19:33:23Z")

</div>

> [@nminchin](#):
>
> You don’t use Perspective Styles then?

Would you say it is a must?

I'm still a beginner on perspective so it has been challenging.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [February 27, 2022, 7:46pm UTC](https://forum.inductiveautomation.com/t/tip-how-to-create-svgs-and-changing-the-fill-color-dynamically/53361/15 "2022-02-27T19:46:59Z")

</div>

@tupanaster  
Yes. You won’t be able to do a number of things without them for example hover animations, animations in general eg from on colour to another. But most importantly, they offer style standardisation to your project for things like button look and feel, device state colours, styling of analogue values, setpoints, font sizing, etc. etc.  
I combine styles with a css theme to define my colours in css variables and use those variables in my perspective styles. You can see examples in the project themes folder on the gateway, I’ll copy a folder path in later on. There’s also a read me in there as well

---

<div class="post-metadata">

**Author:** ![tupanaster](https://avatars.discourse-cdn.com/v4/letter/t/5daacb/32.png) [@tupanaster](https://forum.inductiveautomation.com/u/tupanaster)\
**Post date:** [February 28, 2022, 8:25am UTC](https://forum.inductiveautomation.com/t/tip-how-to-create-svgs-and-changing-the-fill-color-dynamically/53361/16 "2022-02-28T08:25:43Z")

</div>

For my first demo (which I' m still working on) I just grabbed one of the templates to work with. I removed the color variable from some styles in the Styles folder and hardcoded the ones I want to use. I hope to understand this part better for the next demo and before my first real project.

Going back to SVG drawings, it would be nice to wrap up tips and tricks in another post like this

> [@Vector Graphics tips and tricks for Ignition 7.3](https://forum.inductiveautomation.com/t/vector-graphics-tips-and-tricks-for-ignition-7-3/3492):
>
> The inclusion of vector graphics in Ignition 7.3 is putting some of us control systems guys into unfamiliar territory with graphics tools; until last week, Microsoft Paint was as sophisticated as I got. So now I’m using [Paint.NET](http://Paint.NET) and Inkscape for raster and vector editing, respectively, and I am beginning to gain a lot of respect for Adobe Illustrator users. What I’ve been doing is editing PNG files in [Paint.NET](http://Paint.NET) and converting them using the Bitmap Trace feature in Inkscape. My contribution …

My imported SVG from Inkscape have tons of errors. Even after exporting as optimized SVG. yesterday I even got a new weird error; the color in the designer was different from the one showed in the browser. Like if it was null.

Color was changed just as this post explained, drilling down to the fill or color property to change colors. But in the browser it looks like a null color or something.

Designer:

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

Property transform

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/e/1edf7eda7d197395e8986f5adf611c69cbbc157f.png)

Browser:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/f/0fe3995aac919c9cd5197e473a3bf977368c6cf6.png)

It also used to look as null in the workstation but today it looks the same... A bit weird

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [February 28, 2022, 9:38am UTC](https://forum.inductiveautomation.com/t/tip-how-to-create-svgs-and-changing-the-fill-color-dynamically/53361/17 "2022-02-28T09:38:42Z")

</div>

this.props.Fill should go to custom props

---

<div class="post-metadata">

**Author:** ![tupanaster](https://avatars.discourse-cdn.com/v4/letter/t/5daacb/32.png) [@tupanaster](https://forum.inductiveautomation.com/u/tupanaster)\
**Post date:** [February 28, 2022, 5:45pm UTC](https://forum.inductiveautomation.com/t/tip-how-to-create-svgs-and-changing-the-fill-color-dynamically/53361/18 "2022-02-28T17:45:59Z")

</div>

So I created a custom prop and bind it to the color. Same result

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/0/60f0b4b87cf5c6b9f139cc3b7d22d847406e1e31.png)

On web browser:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/a/8a930a1b7caa0eff0d67e6f34655b64240678bf8.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [March 1, 2022, 7:38am UTC](https://forum.inductiveautomation.com/t/tip-how-to-create-svgs-and-changing-the-fill-color-dynamically/53361/19 "2022-03-01T07:38:09Z")

</div>

heh weird, could you provide the json of the svg so i can test some stuff?

---

<div class="post-metadata">

**Author:** ![tupanaster](https://avatars.discourse-cdn.com/v4/letter/t/5daacb/32.png) [@tupanaster](https://forum.inductiveautomation.com/u/tupanaster)\
**Post date:** [March 1, 2022, 7:52am UTC](https://forum.inductiveautomation.com/t/tip-how-to-create-svgs-and-changing-the-fill-color-dynamically/53361/20 "2022-03-01T07:52:58Z")

</div>

Here it is.

> **JSON code**
>
> [  
> {  
> “type”: “ia.shapes.svg”,  
> “version”: 0,  
> “props”: {  
> “viewBox”: “0 0 140 120”,  
> “elements”: [  
> {  
> “elements”: [  
> {  
> “d”: “m8.6705 44.8h121.91”,  
> “fill”: {  
> “paint”: “#C0C0C0”  
> },  
> “name”: “path”,  
> “stroke”: {  
> “paint”: {  
> “gradientTransform”: “matrix(0 0 0 0 -15897 -329.96)”,  
> “stops”: [  
> {  
> “offset”: “0”,  
> “stopColor”: “#55555a”  
> }  
> ],  
> “type”: “linear”  
> }  
> },  
> “type”: “path”  
> },  
> {  
> “fill”: {  
> “paint”: {  
> “gradientTransform”: “matrix(0 0 0 0 -15897 -415.11)”,  
> “stops”: [  
> {  
> “offset”: 0  
> }  
> ],  
> “type”: “linear”  
> }  
> },  
> “height”: “59.583”,  
> “name”: “rect”,  
> “transform”: “scale(-1)”,  
> “type”: “rect”,  
> “width”: “121.91”,  
> “x”: “-131.13”,  
> “y”: “-104.79”  
> },  
> {  
> “d”: “m4 110h132v-100h-5v95h-122v-95h-5z”,  
> “fill”: {  
> “paint”: {  
> “gradientTransform”: “matrix(2.3872 0 0 4.7384 4109.4 3902.3)”,  
> “stops”: [  
> {  
> “offset”: “0”,  
> “stopColor”: “#d9d1c8”  
> }  
> ],  
> “type”: “linear”  
> },  
> “rule”: “evenodd”  
> },  
> “name”: “path”,  
> “stroke”: {  
> “dasharray”: “1, 1”,  
> “linecap”: “square”,  
> “paint”: {  
> “gradientTransform”: “matrix(0 0 0 0 -15897 -415.11)”,  
> “stops”: [  
> {  
> “offset”: “0”,  
> “stopColor”: “#9c9e9f”  
> }  
> ],  
> “type”: “linear”  
> }  
> },  
> “type”: “path”  
> },  
> {  
> “d”: “m9.0329 14.767h121.26v-4.6842h-121.26z”,  
> “fill”: {  
> “paint”: {  
> “gradientTransform”: “matrix(2.3872 0 0 4.7384 4109.4 3902.3)”,  
> “stops”: [  
> {  
> “offset”: “0”,  
> “stopColor”: “#d9d1c8”  
> }  
> ],  
> “type”: “linear”  
> },  
> “rule”: “evenodd”  
> },  
> “name”: “path”,  
> “stroke”: {  
> “dasharray”: “1.16609, 1.16609”,  
> “linecap”: “square”,  
> “paint”: {  
> “gradientTransform”: “matrix(0 0 0 0 -15897 -415.11)”,  
> “stops”: [  
> {  
> “offset”: “0”,  
> “stopColor”: “#9c9e9f”  
> }  
> ],  
> “type”: “linear”  
> }  
> },  
> “type”: “path”  
> }  
> ],  
> “name”: “group”,  
> “type”: “group”  
> }  
> ],  
> “Fill”: “blue”  
> },  
> “meta”: {  
> “name”: “OPT Sump 2”  
> },  
> “position”: {  
> “height”: 1,  
> “width”: 1  
> },  
> “custom”: {  
> “customPropColor”: “stronger gray”  
> },  
> “propConfig”: {  
> “props.elements[0].elements[1].fill.paint.stops[0].stopColor”: {  
> “binding”: {  
> “config”: {  
> “path”: “this.custom.customPropColor”  
> },  
> “transforms”: [  
> {  
> “fallback”: “#000000”,  
> “inputType”: “scalar”,  
> “mappings”: [  
> {  
> “input”: “stronger gray”,  
> “output”: “#A0A0A0”  
> }  
> ],  
> “outputType”: “color”,  
> “type”: “map”  
> }  
> ],  
> “type”: “property”  
> }  
> }  
> }  
> }  
> ]

Edit 2:

> **Formatted JSON string**
>
> ```auto
> [
> {
> "type": "ia.container.coord",
> "version": 0,
> "props": {
> "mode": "percent",
> "aspectRatio": "1:1"
> },
> "meta": {
> "name": "root"
> },
> "position": {},
> "custom": {},
> "children": [
> {
> "type": "ia.shapes.svg",
> "version": 0,
> "props": {
> "viewBox": "0 0 140 120",
> "elements": [
> {
> "elements": [
> {
> "d": "m8.6705 44.8h121.91",
> "fill": {
> "paint": "#C0C0C0"
> },
> "name": "path",
> "stroke": {
> "paint": {
> "gradientTransform": "matrix(0 0 0 0 -15897 -329.96)",
> "stops": [
> {
> "offset": "0",
> "stopColor": "#55555a"
> }
> ],
> "type": "linear"
> }
> },
> "type": "path"
> },
> {
> "fill": {
> "paint": {
> "gradientTransform": "matrix(0 0 0 0 -15897 -415.11)",
> "stops": [
> {
> "offset": 0
> }
> ],
> "type": "linear"
> }
> },
> "height": "59.583",
> "name": "rect",
> "transform": "scale(-1)",
> "type": "rect",
> "width": "121.91",
> "x": "-131.13",
> "y": "-104.79"
> },
> {
> "d": "m4 110h132v-100h-5v95h-122v-95h-5z",
> "fill": {
> "paint": {
> "gradientTransform": "matrix(2.3872 0 0 4.7384 4109.4 3902.3)",
> "stops": [
> {
> "offset": "0",
> "stopColor": "#d9d1c8"
> }
> ],
> "type": "linear"
> },
> "rule": "evenodd"
> },
> "name": "path",
> "stroke": {
> "dasharray": "1, 1",
> "linecap": "square",
> "paint": {
> "gradientTransform": "matrix(0 0 0 0 -15897 -415.11)",
> "stops": [
> {
> "offset": "0",
> "stopColor": "#9c9e9f"
> }
> ],
> "type": "linear"
> }
> },
> "type": "path"
> },
> {
> "d": "m9.0329 14.767h121.26v-4.6842h-121.26z",
> "fill": {
> "paint": {
> "gradientTransform": "matrix(2.3872 0 0 4.7384 4109.4 3902.3)",
> "stops": [
> {
> "offset": "0",
> "stopColor": "#d9d1c8"
> }
> ],
> "type": "linear"
> },
> "rule": "evenodd"
> },
> "name": "path",
> "stroke": {
> "dasharray": "1.16609, 1.16609",
> "linecap": "square",
> "paint": {
> "gradientTransform": "matrix(0 0 0 0 -15897 -415.11)",
> "stops": [
> {
> "offset": "0",
> "stopColor": "#9c9e9f"
> }
> ],
> "type": "linear"
> }
> },
> "type": "path"
> }
> ],
> "name": "group",
> "type": "group"
> }
> ],
> "Fill": "blue"
> },
> "meta": {
> "name": "OPT Sump 2"
> },
> "position": {
> "height": 1,
> "width": 1
> },
> "custom": {
> "customPropColor": "stronger gray"
> },
> "propConfig": {
> "props.elements[0].elements[1].fill.paint.stops[0].stopColor": {
> "binding": {
> "config": {
> "path": "this.custom.customPropColor"
> },
> "transforms": [
> {
> "fallback": "#000000",
> "inputType": "scalar",
> "mappings": [
> {
> "input": "stronger gray",
> "output": "#A0A0A0"
> }
> ],
> "outputType": "color",
> "type": "map"
> }
> ],
> "type": "property"
> }
> }
> }
> },
> {
> "type": "ia.display.label",
> "version": 0,
> "props": {
> "style": {
> "backgroundColor": "#A0A0A0"
> }
> },
> "meta": {
> "name": "Label"
> },
> "position": {
> "x": 0.0641,
> "y": 0.3849,
> "height": 0.44,
> "width": 0.8714
> },
> "custom": {}
> }
> ]
> }
> ]
> 
> ```

[Next page](https://forum.inductiveautomation.com/t/tip-how-to-create-svgs-and-changing-the-fill-color-dynamically/53361.md?page=2)