A step by step walkthrough for turning an SVG drawing into a clickable diagram with popups or a text panel in PlotSet.
Cerca de 10 minutosYou 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.
O caminho exato no PlotSet, de um modelo em branco até o gráfico finalizado.
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.
Comece pelo modelo de Interactive SVG com dados de exemplo já carregados, depois substitua-os pelos seus.
Abrir o modeloA reta final é igual para todo tipo de gráfico: o Share transforma o gráfico em um link público interativo e em um código de incorporação; o Export gera um arquivo estático.
Ativar o código de incorporação e o link público é o que publica o gráfico. O link pode ser enviado com segurança para qualquer pessoa, e o código de incorporação entra em qualquer página como um iframe que mantém a interatividade e os tooltips ao passar o mouse. Edite o gráfico depois e clique em Recreate para levar essas mudanças aos dois.
O Export grava uma cópia estática no tamanho que você precisar. O SVG continua nítido em qualquer escala e ainda pode ser editado em uma ferramenta de design; PNG e JPG são as escolhas seguras para slides e documentos. É o multiplicador de escala que garante uma imagem nítida em uma tela retina.
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.
Não tem certeza se o Interactive SVG é a escolha certa? Veja o que é, quando usar e quando evitar.
Yes. Export it as SVG with the layer names kept as ids, then paste the markup or link to it.
Grátis para começar com mais de 300 modelos. Sem cartão de crédito.
