PlotSet LogoPlotSet
Alle Diagrammtypen

Interactive SVG Maker

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.

Was ist ein Interactive SVG?

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.

Wann ein Interactive SVG sinnvoll ist

  • You have a labelled diagram

    Anatomy, engines, buildings and flowcharts all become easier to explore when each part explains itself.

  • Readers need detail on demand

    The drawing stays clean and the text appears only for the part a reader asks about.

  • You already have the artwork

    Bring an SVG from a design tool and link it to your data instead of redrawing it.

  • You want links from parts

    A row can carry a link, so clicking a part can take readers to a longer page.

Wann ein Interactive SVG nicht passt

  • You need a geographic map

    There is no projection or latitude and longitude here. Use a map template instead.

  • You want to plot numbers on axes

    This template does not draw a scale. A bar, line or scatter chart is the better fit.

  • The artwork has no ids

    Parts can only be matched by id, class or name, so a flat image with nothing to select will not work.

  • The output is a still image

    A static export shows one state. The value of this chart is in the interaction.

Interactive SVG erstellen: Schritt für Schritt

Von der Tabelle zum veröffentlichten Diagramm, Schritt für Schritt.

  1. 01Open the Interactive SVG template
  2. 02Add your drawing
  3. 03Add one row for each part
  4. 04Choose click or hover
  5. 05Pick a popup or a panel
  6. 06Publish and embed
Vollständigen Interactive SVG-Leitfaden lesen

Die Bestandteile eines Interactive SVG

Artwork
The SVG drawing the reader looks at.
Clickable parts
The elements whose id matches a row of your data.
Markers
Numbered circles that show where the reader can click.
Popup
A small box with a heading and text for the part under the pointer.
Text panel
An optional area beside or below the drawing that shows the selected part.
Legend
Swatches for the optional category column.

Häufige Fehler bei einem Interactive SVG

Ids that do not match

A row whose id is not found in the SVG cannot be selected. Check the spelling against the drawing.

Long text in the panel

The panel does not scroll and long text is cut. Keep each entry short.

Relying on hover on phones

Touch screens have no hover, so use click as the trigger for charts people will open on a phone.

Hiding the link

With popups only, a link cannot be clicked inside the popup. Let a click follow the link directly.

Interactive SVG: häufige Fragen

A vector drawing whose parts show extra text when a reader clicks or hovers over them.

Erstellen Sie jetzt Ihr Interactive SVG

Kostenlos starten mit über 300 Vorlagen. Keine Kreditkarte nötig.