Technical documentation - Hotspot identification in SVG

Owned by Mattias Löfstrand
Last updated: 13 May 2022
2 min read

This article describes how hotspots are identified in SVG-files.

Overview

SVG files, if created in a tool like Creo Illustrate or 3DViaComposer, may contain xml based information which can be used to identify hotspots at import. The below strategies are used when identifying hotspots in Signifikant. It is also possible to make entire parts highlight when hovering, provided that SVG follow a defined structure and a profile setting is added to support this.

Strategy 1 - recommended strategy

Import will look in the svg for groups. Any group containing an id set to "Hotspot.xxx" will be used as a hotspot according to:

  • Identify hotspot by looking at the element <g id=”Hotspot.XXX”>

  • Get the hotspot id from the text element located just under the <g> tag.

  • Set the size based on the text element.

Strategy 2

If svg file does not contain the hotspot meta data according to strategy 1 then the following will be done. Identify <text> elements which meet the following criterion:

  • Max 3 characters e.g 1-999

  • Min 1 character

  • No spaces but "." allowed as separator

Strategy 3

Creo Illustrate may produce hotspot information as a standard function. Creo uses four methods to do this, and Signifikant will use all four:

Method

Description

Method

Description

Creo standard

Signifikant will take the number in the <title> tag after <g id="xxx" class="part part_"> as part number (persistent id) and the text as pos. 

Line break

In case there is a line break in the title, Signifikant will use the number before the line break as part number (persistent id) and the text as pos.

Comma

In case there is a comma, Signifikant will use the number before the comma (“,”) as part number (persistent id) and the text as pos.

PRT

In case there is a file name with ending ".prt", Signifikant will use the number before the file ending (“.PRT”) as part number (persistent id) and the text as pos.

Mapping hotspots to pos

For a hotspot to highlight a part row in the spare part list the position of the part row has to match the hotspot. The matching algorithm takes care of the following cases:

  • Direct mapping: hotspot X mapped to pos X

  • Removal of 0 in beginning: hotspot 000X mapped to pos X and hotspot X mapped to pos 00X

  • Removal of numbers within (): hotspot X mapped to pos X (Y-Z)

Make entire parts highlight when hoovering

Version 4.3.1

This function is available from version 4.3.1 and later.



It is also possible to make entire parts highlight when hoovering, provided that SVG follow a defined structure and a profile setting is added to support this. To enable part hoovering effect add the below to profile.config.

<HotSpotSettings hover-class="hover" selected-class="selected"> <Selector selector=".callout" identity-pattern=".callout_{0}"/> <Selector selector=".hotspot" identity-pattern=".hotspot_{0}"/> <Selector selector=".part" identity-pattern=".part_{0}" part-number-pattern=".partnumber_{0}"/> </HotSpotSettings>

selector is an jquery / css path to identify the SVG element as an hotspot

identity-pattern is a pattern to get the identity from the SVG element. Formats like this is supported: .xxx{0}... 

part-number-pattern is a pattern to read the part number from the SVG element