PlotSet LogoPlotSet
Todos los tipos de gráficos

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.

¿Qué es un 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.

Cuándo usar un Interactive SVG

  • 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.

Cuándo no usar un Interactive SVG

  • 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.

Cómo crear un Interactive SVG

De una hoja de cálculo a un gráfico publicado, paso a paso.

  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
Leer la guía completa de Interactive SVG

Las partes de un 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.

Errores comunes con un 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: preguntas frecuentes

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

Crea tu Interactive SVG ahora

Gratis para empezar, con más de 300 plantillas. Sin tarjeta de crédito.