Accessing SVG Properties with a Custom Icon Repository

Ignition
1

TLDR

In our Perspective projects we use a custom icon repository to display various components. We have use cases where different items/layers in the SVG need to be different colors -- often through dynamic bindings. By default, the color and styling properties of a Perspective Icon seem to change the color of all layers in the SVG. Is there any way that individual layers of an SVG can be accessed/edited through the Perspective Property Editor for an icon component?

Example

Suppose we have the following custom icon repository file, example.svg. This file is a subset of the example from the Ignition User Manual:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">  
        
    <!--roman numeral one icon-->
    <svg viewBox="0 0 24 24">
        <g id="one">
            <rect
            id="rect3723" width="15.09025" height="3.0526078" x="4.4548745" y="2.4385488" />
            <rect
            id="rect3723-3" width="15.09025" height="3.0526078" x="4.4548745" y="19.510113"/>
            <rect
            id="rect3755" width="3.4557824" height="16.990929" x="10.272108" y="3.5045362" />
        </g>
    </svg>
    <!--roman numeral two icon-->
    <svg viewBox="0 0 24 24">
        <g id="two">
            <rect
            id="rect3723" width="15.09025" height="3.0526078" x="4.4548745" y="2.4385488" />
            <rect
            id="rect3723-3" width="15.09025" height="3.0526078" x="4.4548745" y="19.510113" />
            <rect
            id="rect3755" width="3.4557824" height="16.990929"  x="6.8435426" y="3.5045362" />
            <rect
            id="rect3755-9" width="3.4557824" height="16.990929" x="13.700686" y="3.5045002"/>
        </g>
    </svg>   
</svg>

Suppose we have an icon component for the roman numeral one (path = example/one) from above. Is there a way to only alter the color of the rectangle with id="rect3723" within the Icon's perspective property editor?

Current Approaches

Embedded views

We have been mitigating the above issue by creating views that have multiple icons (subsets of a full SVG) and creating parameters to control the color of each item. Thus, we use embedded views instead of icons throughout the project.

Embedded SVGs / Drawing Components

When I embed an SVG by dragging it in to a Perspective View, it has an elements property where I'm able to access the various SVG layers and edit them accordingly.

image
image996×593 58.6 KB

This is exactly what we need -- my only concern is that it can degrade performance. If we can achieve this but using icons stored in the Gateway, that would be ideal. I'd love to know if this is already a capability or what the best approach would be.

2

No, the designer does not expose any of the SVG elements if the SVG is displayed using the Icon or Image component. You only have direct access to the elements if you embed the SVG.

As a different approach, you would need to be very strategic about it, but since the ICON component eventually is just rendered in the browser as an SVG (this is not true of the image component), then you should be able to target the specific elements by the ID using the CSS Stylesheet.

Something like:

rect#rect3723 {
    color: rgb(250,250,251);
}

Would be a lot of work, but would eliminate the need for embedded views just to "simulate" an icon component.

The real performance degradation with embedded views is when they are nested, however, I have also hear that having many embedded SVG's will degrade performance. I would think that so long as the SVG's are relatively simple you wouldn't see much of a hit up to hundreds of SVG's on a single view.

3

I see, thank you for the information. I appreciate the quick response!