Coloring SVG Example
In this example, we selected an individual piece in a push button symbol and added a color to that area.
- Place a push button image or any image from Symbol Factory onto the window.
- Right click on the image and select Ungroup.
- Right click in the center of the image and select Ungroup again.
- Click on the larger inner circle in the image, then select the Fill Paint color you want. We chose red #D90000.
- To get color in the "highlight" section of the graphic, click on the highlight. You'll see that the Fill Paint is a Radial Gradient. Click on the Edit icon to change the colors in the gradient.
- Click on the left side stop and select white. Click on the right side stop and select red.
- To regroup all the parts of the SVG, drag a box around them with your mouse. Then right click and select Group.
Alternately, you can create a style using the Style Customizer to change the color of an SVG path based on a driving property on that path. This is typically done by setting up a custom property to use as the driving property, and then binding the custom property to the property or Tag that will drive the color change.
Let's say you chose one of the many grayscale symbols, such as the 3-D Valve symbol from the Valves category, and you want to tint the valve green when the valve is open, red when the valve has a fault, and keep it gray when the valve is closed. Suppose you have a Tag called ValveStatus, that is 0 for closed, 1 for open, and 2 for faulted.
- Drag the symbol onto the screen.
- Duplicate the symbol by selecting it and choosing Duplicate from the Edit menu, or pressing CTRL-D.
- Now, select the duplicate symbol, which will be above the original.
- Click the Union
This will combine the duplicate SVG into a single shape.
icon in the toolbar or find the Union item under the Shape menu.
- Remove the outline by setting the Stroke Paint property to No Paint .
- Click on the Binding icon next to the Fill Paint property.
- Select the Tag binding type.
- Navigate to the Tag you want to use. For this example, we used a Valve_Status Tag.
- In the Number-to-Color Translation, double click the color next to the Value 0 and select white.
- Click the Add New Translation icon. Set the Value 1 at 40% opaque green.
- Click the Add New Translation icon. Set the Value 2 at 40% opaque red.
- Click OK to save the binding.
- On the window, place another copy of the original symbol.
- Select the colored symbol and select Alignment > Move to Front.
- Next place the colored symbol on top of the original.
- Select them both, then select Component > Group.
In summary, what we did to tint the symbol was to make a flat shape that had the exact same outline as the symbol, and used semi-transparent fills to achieve a tint effect for the underlying symbol.