A step by step walkthrough for turning an SVG drawing into a clickable diagram with popups or a text panel in PlotSet.
Environ 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.
Le parcours exact dans PlotSet, d'un modèle vierge à un graphique terminé.
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.
Partez du modèle Interactive SVG avec des données d'exemple déjà chargées, puis remplacez-les par les vôtres.
Ouvrir le modèleLa dernière ligne droite est la même pour tous les types de graphique : 'Share' transforme le graphique en lien public actif et en code d'intégration, 'Export' l'enregistre sous forme de fichier statique.
Activer le code d'intégration et le lien public revient à publier le graphique. Le lien peut être envoyé à qui vous voulez sans risque, et le code d'intégration s'insère dans n'importe quelle page sous la forme d'une iframe qui conserve les infobulles au survol et l'interactivité. Si vous modifiez le graphique par la suite, cliquez sur 'Recreate' pour répercuter ces changements sur le lien comme sur le code.
Le bouton 'Export' génère une copie statique à la taille dont vous avez besoin. Le SVG reste net à toutes les échelles et peut encore être modifié dans un outil de design ; PNG et JPG sont les choix sûrs pour les présentations et les documents. C'est le multiplicateur d'échelle qui vous donne une image nette sur un écran 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.
Vous n'êtes pas sûr que le Interactive SVG soit le bon choix ? Découvrez ce que c'est, quand l'utiliser et quand l'éviter.
Yes. Export it as SVG with the layer names kept as ids, then paste the markup or link to it.
Gratuit pour commencer avec plus de 300 modèles. Aucune carte bancaire requise.
