A step by step walkthrough for turning an SVG drawing into a clickable diagram with popups or a text panel in PlotSet.
Unos 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.
El camino exacto en PlotSet, desde una plantilla en blanco hasta el gráfico terminado.
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.
Empieza con la plantilla de Interactive SVG, que ya trae datos de ejemplo cargados, y sustitúyelos por los tuyos.
Abrir la plantillaEl último tramo es igual en todos los tipos de gráfico: Share convierte el gráfico en un enlace público en vivo y un código de incrustación, y Export lo guarda como un archivo estático.
Al activar el código de incrustación y el enlace público, el gráfico queda publicado. El enlace se lo puedes enviar a cualquiera sin problema, y el código de incrustación se coloca en cualquier página como un iframe que conserva los tooltips al pasar el cursor y toda la interactividad. Si editas el gráfico más adelante, haz clic en Recreate para llevar esos cambios a ambos.
Export guarda una copia estática en el tamaño que necesites. El SVG se mantiene nítido a cualquier escala y se puede seguir editando en una herramienta de diseño; PNG y JPG son la opción segura para diapositivas y documentos. El multiplicador de escala es lo que te da una imagen nítida en una pantalla 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.
¿No estás seguro de que el Interactive SVG sea la opción correcta? Descubre qué es, cuándo usarlo y cuándo no.
Yes. Export it as SVG with the layer names kept as ids, then paste the markup or link to it.
Gratis para empezar con más de 300 plantillas. No se necesita tarjeta de crédito.
