A step by step walkthrough for turning an SVG drawing into a clickable diagram with popups or a text panel in PlotSet.
About 10 minutesYou will end up with a drawing whose parts open an explanation when a reader clicks or hovers over them.
Expect about ten minutes. Most of it goes on checking that each id in your data matches an element in the drawing.
One row per clickable part, with the id of an element in the SVG and the text to show for it.
| id | heading | subheading | content | link |
|---|---|---|---|---|
| steam-wand | Steam wand | Froths milk | Angle the tip just below the surface. | |
| porta-filter | Portafilter | Holds the coffee | Lock it in a quarter turn. | |
| drip-tray | Drip tray | Catches spills | Empty it every day. | |
| power-button | Power | Switches the machine on | Wait two minutes to warm up. |
The id must match the id, class, name or aria-label of an element in the SVG, ignoring case.
Only the id is required. The heading falls back to the id if left blank.
A category column can recolour the matched parts and build a legend.
A reveal column names an element that stays hidden until its row is selected.
The exact click path in PlotSet, from a blank template to a finished chart.
From the PlotSet dashboard, start a new project and choose Interactive SVG from the Other category. It loads with an espresso machine and five numbered parts.
Open the SVG tab and give a URL or paste your SVG markup. Choose how the drawing fits, sizes and aligns inside the chart.
Import a CSV or .xlsx file, paste rows from a spreadsheet, or connect a Google Sheet. Each row is one part of the drawing.
Choose the id column, then the heading, subheading and content columns. Add a category or a link column if you have them.
In the Interaction tab, pick the trigger, how unselected parts fade, and whether a click follows the row's link.
The Popup content and Text panel tabs set where the details appear and how they are styled.
The Mobile tab sets whether readers see the drawing, the text or both below a set width.
Publish for a live chart and copy the embed code from the Share dialog. Click every part once before you share it.
Start from the Interactive SVG template with sample data already loaded, then swap in your own.
Open the templateThe last stretch is the same for every chart type: Share turns the chart into a live public link and an embed code, Export writes it out as a static file.
Activating the embed code and public link publishes the chart. The link is safe to send to anyone, and the embed code drops into any page as an iframe that keeps the hover tooltips and the interactivity. Edit the chart later and hit Recreate to push those changes out to both.
Export writes a static copy at whatever size you need. SVG stays sharp at any scale and can still be edited in a design tool; PNG and JPG are the safe choices for slides and documents. The scale multiplier is what gets you a crisp image on a retina screen.
Give each part of the drawing a clear id in your design tool before you export the SVG.
Two or three lines per part read well in a popup and fit the panel.
Markers with numbers show readers where to click and give the text an order.
Fading the parts with no row keeps the eye on what is interactive.
Its id does not match an element in the SVG. Compare the spelling with the layer name.
The URL is blocked or missing cross-origin headers. Paste the markup instead.
The panel does not scroll. Shorten the text or switch to popups.
Hover does not exist on touch screens. Switch the trigger to click.
Not sure the Interactive SVG is the right choice? See what it is, when to use it and when not to.
Yes. Export it as SVG with the layer names kept as ids, then paste the markup or link to it.
Free to start with 300+ templates. No credit card required.
