Add an Advanced SVG image

Add an Advanced SVG image to the canvas to change the properties of individual image parts at design time or runtime.
TIP: For example, you can signal a hardware part malfunction by highlighting a hardware component representation.
Prerequisites
To control the image properties, obtain an SVG file that conforms with these requirements:
  • File format is SVG 1.2 Tiny
  • Fill and stroke properties exist and have colors defined as XML attributes or inline CSS
  • Color values are hexadecimal
TIP: If the SVG file does not conform with the requirements, the image will display as expected, but you will not be able to change the image properties.
  1. To add an Advanced SVG image
  2. In
    Project view
    , right-click the object or folder to contain the image and then select
    New
    Drawings
    Advanced SVG image
    .
  3. Double-click the empty image
    Image placeholder
     that appears on the canvas.
  4. In
    Select file
    , select the image to display and then choose
    Select
    .
    TIP: If the file does not appear in
    Select file
    , select
    Import file(s)
     and in
    Import file(s)
    , select the file to import and then choose
    Select
    .
  5. (optional) Open the SVG file in a text editor and verify the
    @id
     attribute of the image element that you want to change.
    For example: 
    <g id="
    ConveyorChassis
    ">
    <polygon style="fill:#3C4660;" points="8.532,379.733 503.466,379.733 503.466,277.333 8.532,277.333"/>
</g>
  6. In
    Properties
    , under
    Property
    #
    , from the
    ID
     select the image element  to change.
    TIP: The drop-down options correspond with the
    @id
     attributes of the SVG file elements. If values do not appear in the drop-down, the SVG image may not conform with the requirements needed to control the image properties.
  7. In
    Value
    , either:
    • Enter a hexadecimal color value.
    • Create a complex dynamic link with a converter to hexadecimal color values.
      Complex dynamic link example
  8. (optional) To change a different part of the image, next to
    SVG Element Properties
    , select
    Add
     and repeat 5 through 6.
Advanced SVG image example - disabled alarm (gray conveyor chassis)
Advanced SVG image example - enabled alarm (red conveyor chassis)
See the complete application example: Develop an icon that changes color.
Provide Feedback
Have questions or feedback about this documentation? Please submit your feedback here.