New Feature: SVG/Responsive Hotspot Icons

Andrew Beelitz September 8, 2016

SVG (scalable vector graphics) hotspot icons are now available on ThingLink with paid user accounts! Now users have the ability to set the icon size in the editor, and these SVG icons will then scale proportionally based on the width of the screen. This will improve the user experience of ThingLink, especially on mobile phones. 

What this new feature means:

SVG icons scale to the hover area and in proportion to the screen width. This means that the icons will be smaller on small screens, and larger on large screens. 

Why it is valuable: 

Today, users alternate between mobile, tablet, and desktop seamlessly. It is important to have content that can alternate just as easily. Smaller screens mean smaller image size. The SVG icons will scale proportionally with your screen size, allowing the viewer to experience the tagged image as originally intended by its creator. 

How to use:

From the tag editor, navigate to select an icon and the preloaded Responsive icons will appear at the top of the icon selection box. Note: you can also upload your own files:

Once you have selected the responsive icon that you would like to use, you can adjust and set the size of the icon. Do this by dragging the white outlined corners of the icon inward or outward until the desired size is achieved: 

Then save the tag. 

The icons will scale with the screen size – a smaller screen on mobile, for example, will result in smaller icons that remain proportional to the size of the image. 

In action:

Try viewing this image with SVG icons on different devices: 

https://fashionunited.de/nachrichten/business/interaktive-karte-zalando-baut-einen-campus-in-berlin/2016090720805