PlotSet LogoPlotSet
全部图表类型

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.

什么是 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.

什么时候使用 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.

什么时候不该用 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.

如何制作 Interactive SVG

从电子表格到已发布的图表,一步一步来。

  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
阅读完整的 Interactive SVG 指南

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.

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:常见问题

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

立即制作你的 Interactive SVG

免费开始,300 多个模板,无需信用卡。