An SVG hotspot is a clickable shape or icon, drawn as scalable vector graphics, that sits on top of a tour scene and sends the viewer somewhere: another panorama, a web page, a PDF, a product. Because SVG is vector art, the marker stays sharp on a phone, a laptop or a 4K display, and you can restyle it with a few lines of code instead of re-exporting an image. This guide explains how SVG hotspots differ from ordinary image hotspots, how to build and link them, how to add PDFs and shoppable product tags, and how to test everything before a client sees it.
TL;DR
- An SVG hotspot is a vector marker or outline placed over a panorama or still image. It scales cleanly and can be styled, animated and made accessible.
- Every clickable area needs a destination (scene, URL, PDF or product) and a text alternative, so keyboard and screen-reader users can use it.
- For PDFs, link the hotspot to a file or page and say in the label that it opens a document. For shop-the-look, each hotspot should show one product, a price and a clear link.
- Test on a real phone and a real desktop browser, with touch, mouse and keyboard, before publishing.
- Simple Virtual Tour lets you build hotspot-driven tours without coding, in the cloud or on your own server.
Table of Contents
- What an SVG hotspot is, and how it differs from other hotspots
- When SVG hotspots are the right choice
- How to create an SVG hotspot and link it
- Adding a hotspot that opens a PDF
- Product tagging and shop-the-look hotspots
- Accessibility and browser compatibility
- Testing and troubleshooting
- Our perspective
- Build your hotspot tour with Simple Virtual Tour
- FAQ
- Sources
What an SVG hotspot is, and how it differs from other hotspots
A hotspot is any interactive element placed on a tour. In most virtual tour tools it is a button on a 360° panorama, a video or a flat image that opens something: a scene change, a text box, a gallery, a link. We cover the full range of types in our guide to virtual tour hotspots, their uses and best practices.
The word "SVG" describes how the marker is drawn. There are three common approaches:
| Approach | How it is drawn | Strength | Weakness |
|---|---|---|---|
| Raster icon (PNG, JPG) | Fixed pixels | Simple to make | Blurs when scaled, needs several sizes |
| Icon font or built-in marker | Pre-made glyphs | Quick to place | Limited shapes and colors |
| SVG marker or outline | Vector paths and shapes | Sharp at any size, stylable, can follow an object's exact outline | Needs more care with coordinates and labels |
Two kinds of SVG hotspot are worth separating:
- Icon hotspots. A small SVG arrow, info badge or shopping-bag symbol placed at a point. This is the most common use in a tour.
- Area (polygon) hotspots. An SVG shape traced around a real object, such as a sofa, a door or a car seat, so the whole object is clickable. Some tour editors call these polygonal hotspots.
On a flat image, a hotspot is positioned in a 2D plane, so a percentage position is usually enough. On a panorama, the marker is attached to a point on a sphere, defined by yaw and pitch angles, and the viewer's perspective bends it as the user looks around. That is why a marker that looks right in one view can feel off in another, and why vector markers that stay crisp while zooming matter. Our article on image gallery hotspots and percent positions goes deeper on the flat-image case.
When SVG hotspots are the right choice
Use SVG when one of these is true:
- You want a branded marker set, in your colors, that looks identical on every device.
- You want to outline an object, such as a kitchen island or a piece of art, instead of dropping a dot beside it.
- You plan to animate a pulse, a hover glow or a color change.
- You need markers at several sizes, for example a small one on desktop and a larger one for fingers on a phone.
Stay with standard built-in icons when speed matters more than polish, such as a first draft of a property tour. A tidy default set is better than a messy custom one. For a practical design review, use our hotspot design checklist.
How to create an SVG hotspot and link it
The exact clicks depend on your tour software, but the workflow is the same everywhere.
1. Prepare the marker
Export or draw your icon as an SVG with a square viewBox, so it does not stretch. Keep the file small, with simple paths and no embedded raster images. Use one or two flat colors, and make sure the marker stands out against both bright and dark parts of your panoramas. A thin white outline around a colored shape works in most rooms.
2. Place it on the scene
Open the scene in your editor, add a hotspot and set its position. On a panorama, you click the spot in the 360° view. On a flat image, you place it by position on the image. Put it on or beside the thing it describes, never floating in empty space.
3. Choose the destination
Decide what the click does. There are four common targets:
- Another scene. For navigation, such as a door, a staircase or a hallway. Use a clear directional marker.
- A web URL. For a booking page, a listing, a menu or a product page.
- A document. For a floor plan, brochure or spec sheet (see the PDF section below).
- An overlay. A text box, image gallery or video that opens without leaving the tour.
4. Write the label
Give every hotspot a short, specific label, such as "Primary suite floor plan (PDF)" instead of "Click here." The label is what a tooltip shows, and it is what assistive technology reads aloud.
5. Link it and preview
Save, open the preview, and click it. Check that the link opens where you expect, in the same tab for tour navigation and in a new tab for outside pages, so viewers do not lose their place in the tour.
If you are writing the SVG yourself
When you hand-code a hotspot layer over a still image, the markup follows the same pattern as an HTML image map. MDN's guidance on image hit maps says each linked area needs a shape, a set of coordinates, an href and alternative text. In SVG, you wrap each shape in a link and give it a title. Keep the shapes in the same order as they appear visually, which we return to in the accessibility section.
The CSS property pointer-events decides whether an SVG element can be the target of a click or tap. Setting it to none on decorative layers, such as a glow or a shadow, lets the click pass through to the hotspot underneath. This single property fixes many "my hotspot does not respond" problems.
Adding a hotspot that opens a PDF
PDF hotspots are among the most useful tools for real estate, events and hospitality. Typical uses:
- A floor plan or disclosure packet on a property tour
- A menu, wine list or banquet package in a restaurant or venue tour
- A spec sheet on a vehicle interior, or a catalog page in a showroom
- A museum label, exhibition guide or lesson worksheet
The method is the same as a URL hotspot: the destination is the address of a PDF file. A few rules make it work well:
- Host the file reliably. Use a stable address on your own site or server, so the link does not break when you rename a file.
- Say it is a PDF. Put "PDF" in the label, and ideally the size, so nobody on a mobile data plan is surprised.
- Keep it short. A one or two page document opens quickly on a phone. Split a 40-page brochure into the pages people actually want.
- Open it in a new tab. The viewer can close it and return to the same spot in the tour.
- Use a tagged PDF. If the document matters for access, export it with real text and headings, not scanned images.
If you would rather not leave the tour, link to a web page that shows the same information, then offer the PDF as a download from there. On phones, built-in PDF viewers differ, so open your file on both iOS and Android before you publish.
For property work, our real estate hotspot creation guide shows where to place document hotspots in a typical home tour.
Product tagging and shop-the-look hotspots
Product tagging turns a tour into a showroom. Each hotspot sits on an item in the scene, such as a lamp, a rug, a jacket on a mannequin or a bike on a rack, and opens a small card with the product and a path to buy. A shop-the-look layout adds a combined view of every item in the scene.
What each product hotspot should show:
- A clear name and one photo
- The price, in dollars for a US audience, matching the price on the product page
- One action, such as "View product" or "Add to cart"
- Availability, if stock is limited
Keep the card short. A viewer is exploring a room, not reading a catalog.
It helps to look at how mature commerce tools handle this. The WordPress.org Shoppable Lookbook and Image Hotspots plugin lists draggable product markers, WooCommerce product links, custom URLs with a title, image and price, and markers that work with a keyboard and screen reader. Its premium feature set also describes a shop-the-look bar with an add-all-to-cart option and a live total, quick view, analytics, custom PNG or SVG markers and a mobile bottom-sheet display. Those are good patterns to copy in any tour, whatever software you use: one product per marker, a visible price, a bottom card on phones instead of a cramped pop-up, and a way to track which markers get clicks.
If you run a store on WordPress, it is also worth reading about mobile optimization and e-commerce SEO, since a tour with product markers is only as good as the mobile page it sends buyers to.
Simple Virtual Tour supports e-commerce integration, so product hotspots can connect a tour to your store. For event planners, furniture showrooms, retail stores and home stagers, the practical approach is simple: tag the five to eight items that define the room, link each to its product page, and leave the rest alone.
Accessibility and browser compatibility
A hotspot that only works with a mouse excludes many viewers. Build these basics in from the start.
Give every marker a name
An inline SVG does not use the HTML alt attribute. MDN's SVG guidance recommends role="img" with a title and, where needed, a desc element or aria-labelledby. The SVG title element supplies a short accessible description, and browsers commonly show it as a tooltip. In practice: "Kitchen island, view details" is a good title; "icon 3" is not.
Keep a logical order
Keyboard users move through links in source order. MDN recommends that the order match the visual order, so the Tab key feels intuitive. For a tour, that usually means left to right, then near to far, or in the walking path through the space.
Make touch targets generous
Tiny markers are hard to hit on a phone. We recommend sizing for fingers, not cursors; our piece on 72x72 touch targets explains the reasoning.
Be careful with autofocus
MDN warns that autofocus can disorient screen-reader users, scroll the page and open keyboards on touch devices, so use it sparingly. Do not auto-focus a hotspot when the tour loads.
Browser support
MDN lists SVGElement as widely available across devices and browser versions, while noting that individual SVG features can differ in support. In plain terms: basic shapes, links and titles are safe. Advanced filters, complex animations and newer CSS effects deserve a test in each browser you care about, at minimum Chrome, Safari and Firefox, plus the Safari on iPhone.
For a deeper look at accessible navigation, see our write-up on accessible custom navigation for virtual tours.
Testing and troubleshooting
Test the tour the way a customer will use it. A short routine:
- Desktop, mouse. Hover and click each hotspot. Does the tooltip show? Does the link go to the right place?
- Desktop, keyboard. Press Tab through the tour. Can you reach every hotspot, in a sensible order, and activate it with Enter?
- Phone, touch. Use a real phone, not just a resized browser window. Tap each marker with your thumb. Rotate the phone to landscape.
- Slow connection. Load the tour on mobile data. Are large PDFs and images slowing it down?
- A second device and browser. Check an iPhone and an Android phone, and Safari as well as Chrome.
Common problems and fixes:
| Symptom | Likely cause | Fix |
|---|---|---|
| Marker does not respond to clicks | An overlay layer sits on top | Set pointer-events to none on decorative layers |
| Marker looks blurry | Raster icon scaled up | Switch to an SVG with a proper viewBox |
| Marker drifts off the object on resize | Pixel positions on a flat image | Use percent positions |
| Marker is hard to tap on a phone | Target too small | Enlarge the clickable area, not just the icon |
| Screen reader says "link" or "image" only | Missing title or label | Add a specific title and description |
| PDF opens, but the viewer cannot get back | Opened in the same tab | Open outside documents in a new tab |
| Marker invisible in some rooms | Low contrast | Add an outline or use a lighter or darker variant |
For layout ideas that earn clicks, see our hotspot templates, and for large sites, interactive maps in virtual tours help viewers find their way before they ever reach a hotspot.
Our perspective
We built Simple Virtual Tour on a belief that most people who need a virtual tour are not developers. A real estate agent, a hotel manager or a museum educator wants the tour to work, look good and be theirs. That is why we offer both a cloud-hosted version and a self-hosted one, with full ownership of the source code in the self-hosted case, and why the backend is designed to be usable without technical skills.
On hotspots specifically, we see the same mistakes again and again. People add too many markers, they write vague labels, and they never test on a phone. The fix is rarely a more advanced technique. It is fewer hotspots, each with a clear purpose, a readable label and a destination that is worth the click. SVG is a good tool for that, because it keeps markers crisp and consistent. But the marker is the smallest part of the job. What it points to matters far more.
If you take one habit from this guide, make it this: before publishing, hand your tour to someone who has never seen it, and watch where they hesitate.
— Andrea
Build your hotspot tour with Simple Virtual Tour
If you want to put this into practice without writing code, Simple Virtual Tour gives you an editor for panoramas, photos and video, with hotspots, e-commerce integration, custom branding and statistics. You can start on the Free Forever plan, or choose a paid cloud plan: XS (Starter) at €2.99 per month, S (Creator) at €5.99, M (Professional) at €9.99, L (Business) at €19.99 or XL (Enterprise) at €49.99 per month.
Prefer to own the software? The self-hosted CORE version is a one-time $79 purchase, with optional plugins: the GSV plugin for Google Street View publishing at $59, the A.I. Tools plugin at $39 and the SaaS plugin for multi-user management at $269. See all plans and start building, or compare options on the Simple Virtual Tour homepage.
Not sure where to begin? Our guide on building interactive virtual tours from 360° panoramas walks through the whole workflow, and the article on virtual tours and customer engagement shows how design choices hold attention. More guides are on the Simple Virtual Tour blog.
FAQ
What is the difference between an SVG hotspot and a regular hotspot?
A regular hotspot can be any clickable element, often a raster icon or a built-in button. An SVG hotspot is drawn with vector shapes, so it stays sharp at any size and can be restyled or outlined around an object. The click behavior is the same: it leads to a scene, a link, a document or an overlay.
Can a hotspot open a PDF in a virtual tour?
Yes. Point the hotspot at the web address of the PDF, label it clearly as a PDF, and open it in a new tab so viewers can return to the tour. Keep the file small and test it on both iPhone and Android.
How do I add shop-the-look product tags to a tour?
Place one hotspot on each product, and link each to its product page or a small card with the name, photo and price. Limit the scene to the handful of items that define the look. Check that the product pages work well on a phone.
Are SVG hotspots accessible?
They can be, if you add a title or accessible name to each one, keep the tab order aligned with the visual order, and make sure every marker works with a keyboard. SVG does not use HTML alt text, so the title and description elements do that job.
Why does my hotspot not respond when I click it?
The most common cause is another layer sitting on top of it. Setting pointer-events to none on decorative layers lets clicks pass through. If that does not help, check that the link has a valid destination and that the marker is large enough to tap.
Sources
- Add a hitmap on top of an image, MDN
- pointer-events CSS property, MDN
- Shoppable Lookbook and Image Hotspots, WordPress.org
- SVG in HTML, MDN
- SVG title element, MDN
- autofocus attribute, MDN
- SVGElement, MDN