Turn any SVG drawing into a clickable diagram. Tie each part to a row of your spreadsheet and show its text on hover or click, then publish for free.
An interactive SVG is a drawing whose parts open an explanation when a reader clicks or hovers over them. Each row of your data names one element in the artwork and carries a heading, a subheading and a block of text. When the reader selects that element, the text appears in a popup or in a panel beside the drawing. It is the right tool for anatomy diagrams, machine cutaways, floor plans and process maps, where the picture does most of the talking and the words explain the details.
Anatomy, engines, buildings and flowcharts all become easier to explore when each part explains itself.
The drawing stays clean and the text appears only for the part a reader asks about.
Bring an SVG from a design tool and link it to your data instead of redrawing it.
A row can carry a link, so clicking a part can take readers to a longer page.
There is no projection or latitude and longitude here. Use a map template instead.
This template does not draw a scale. A bar, line or scatter chart is the better fit.
Parts can only be matched by id, class or name, so a flat image with nothing to select will not work.
A static export shows one state. The value of this chart is in the interaction.
From a spreadsheet to a published chart, step by step.
A row whose id is not found in the SVG cannot be selected. Check the spelling against the drawing.
The panel does not scroll and long text is cut. Keep each entry short.
Touch screens have no hover, so use click as the trigger for charts people will open on a phone.
With popups only, a link cannot be clicked inside the popup. Let a click follow the link directly.
A vector drawing whose parts show extra text when a reader clicks or hovers over them.
Free to start with 300+ templates. No credit card required.
