A step by step walkthrough for turning an SVG drawing into a clickable diagram with popups or a text panel in PlotSet.
约 10 分钟You 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.
PlotSet 中从空白模板到完成图表的具体点击路径。
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.
从已加载示例数据的 Interactive SVG 模板开始，再替换成你自己的数据。
打开模板最后一段路对每种图表都一样：「Share」（分享）把图表变成一个在线的公开链接和一段嵌入代码，「Export」（导出）把它输出成静态文件。
打开嵌入代码和公开链接的开关，图表就发布出去了。链接可以放心发给任何人；嵌入代码以 iframe 的形式放进任意页面，悬停提示和交互效果都会保留。之后修改了图表，点「Recreate」就能把改动同步到链接和嵌入代码两边。
「Export」会按你需要的尺寸输出一份静态副本。SVG 放到多大都清晰，还能在设计工具里继续编辑；幻灯片和文档用 PNG 或 JPG 最稳妥。想让图片在高分屏上够锐利，关键就是那个倍数设置。
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.
不确定 Interactive SVG 是否是正确选择？查看它是什么、何时使用以及何时不使用。
Yes. Export it as SVG with the layer names kept as ids, then paste the markup or link to it.
免费开始，300+ 模板任选。无需信用卡。
