---
title: "SVG Scheme"
slug: "svg-scheme"
updated: 2025-02-07T14:01:52Z
published: 2025-02-07T14:01:52Z
canonical: "learn.servitly.com/svg-scheme"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# SVG Scheme

In the scheme definition, you can specify whether the target image is an SVG image.

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/image(37).png?sv=2026-02-06&spr=https&st=2026-10-16T18%3A16%3A09Z&se=2026-10-16T19%3A16%3A09Z&sr=c&sp=r&sig=l3H1SmmOvOCVvQXRtqghTRFJsDQLYb4tqngHGLOFZOA%3D)

By selecting SVG, within the [Catalog](/docs/spare-parts-catalog) it is possible to click on image markers.

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/image(38).png?sv=2026-02-06&spr=https&st=2026-10-16T18%3A16%3A09Z&se=2026-10-16T19%3A16%3A09Z&sr=c&sp=r&sig=l3H1SmmOvOCVvQXRtqghTRFJsDQLYb4tqngHGLOFZOA%3D)

By default, all text elements became clickable, and when clicked, the text is used to search by position and open the details of a Spare Part or a sub Model Part.

In case you need a more interactive schema, such as highlighting entire sections of the machine, you can redefine the JavaScript function responsible for making elements clickable on mouseover. To do this you need to register the following filter in the [custom filters](/docs/creating-custom-filters) components and redefine the transform method according to the desired result you want to achieve.

```javascript
exports.svgProductSchemaTransformer = function() {

	function SVGProductSchemaTransformer() { }

	SVGProductSchemaTransformer.prototype.transform = function(svg, args) {
		svg.find("text").each(function() {
			let position = $(this).text();
			if (position && args.svgPositionMap && args.svgPositionMap[position]) {
				let objectByPosition = args.svgPositionMap[position];
				const options = { clickableObject: objectByPosition, clickableClass: args.clickableClass };
				appUtils.getCatalog().addSvgClickableElement(this, options);
			}
		});

	};
	return SVGProductSchemaTransformer;
}();
```

The above filter receive the SVG element that is used to find all text elements and transform them to clickable elements. Depending on how the SVG is structured, you can redefine the schema transformer function to make whole parts of the schema clickable, and not just the number or position label. When the "*addSvgClickableElement*" function is invoked, the element is enriched with the CSS class named "*svg-clickable*" which is responsible to change how the element is displayed when the mouse passes over it (e.g. stroke color).

```css
svg text.svg-clickable:hover{
 stroke: var(--accent-color) !important;
 cursor: pointer;
 font-size: larger;
}
```

In the "*options*" parameter you can pass a custom CSS class to be added to the clickable element.

```javascript
const options = {"technicalSchemePosition": $(this).text(), "clickableClass": "my-css-class", ...context};
```

You can edit your custom class into the [Appearance / CSS](/v1/docs/css) page.