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

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.

  • 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

  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.

  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.)

I hope someone finds this useful.

6 Likes

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

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

1 Like

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

1 Like

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

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:

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

2 Likes

or fill instead of backgroundcolor

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

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

You don’t use Perspective Styles then?

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

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

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

Oh, I completely missed the last line of your reply :grinning_face_with_smiling_eyes: