# 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:** 1\
**Showing post:** 16

<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

---

_[View the full topic](https://forum.inductiveautomation.com/t/tip-how-to-create-svgs-and-changing-the-fill-color-dynamically/53361)._
