SVG Symbols and Variants - Reusable Components

Quick answer

Select artwork and choose Create Symbol in the Symbols panel. Every placement is an instance of one definition, so editing the definition updates all of them. Give the symbol variant axes to carry alternative versions, and animate an instance between them with an instanceVariant track - the export writes one <symbol> and a <use> per instance.

What a symbol gives you

One definition, every instance Three instances of one symbol. Change the definition and all three follow, because the file holds one <symbol> and three <use> elements pointing at it - not three copies.

A symbol morphing into its own variant One instance and one animation track, exported. The two variants share their shape ids, so the disc travels down-left and halves while the wedge climbs and grows, and every fill crosses to its counterpart on the way. The track alternates three times.

Two axes make a matrix A symbol with a state axis and a size axis carries every combination. An instance picks one by key, and a combination you have not drawn falls back to the default shapes.

Draw it once, place it everywhere

Select the shapes and click "Create Symbol" in the Symbols panel. What you get is a definition plus one instance; every further placement references the same definition, and the panel shows how many instances each one has. Change the definition and every instance changes with it.

The exported file works the same way: one <symbol> in <defs> and a <use> per instance. That is what makes a symbol worth using over a copy - an icon placed forty times is one copy of the geometry in the file, not forty.

Override one instance without forking the symbol

An instance can carry per-shape overrides - a different fill on one inner element, say - while still tracking the definition for everything else. That keeps a nearly-identical placement from becoming a second definition you then have to maintain in parallel.

Variant axes turn one symbol into a component

Open Variants on a symbol and add an axis: a name and a list of values, such as state with default, hover, pressed. Add a second axis - size with sm, md, lg - and the symbol now carries every combination. The Axes view manages the axes; the Matrix view shows the grid, with row and column pickers and a count of how many combinations are visible.

The first value of every axis is the default variant, and that is the base artwork. A combination you have not drawn falls back to it rather than rendering empty, so you can add an axis to an existing symbol without breaking anything already placed. Each instance then picks its combination by key.

Animate a symbol morphing into its variant

Add an instanceVariant track to an instance in the Animation panel and keyframe it from one variant to another. The instance does not cut between them: the export diffs the two variant trees shape by shape and writes concrete animations for what differs - position, size, rotation, fill, stroke and stroke width, path data, even the stops of a gradient the shapes reference.

Some changes cannot be interpolated at all. A polygon that changes its side count has no correspondence between the two outlines, so the export cross-fades a materialized sibling instead of pretending to tween it. A shape present in only one variant fades in or out.

Because variants are an authoring idea rather than an SVG one, the exported file cannot carry the track directly. The SVG export options let you choose how it is encoded: SMIL for the broadest compatibility, CSS animations for embedding in HTML, or the Web Animations API when you want script control. Animated SVG export is a Pro feature; building the animation is not.

Housekeeping that keeps the file small

The Symbols panel marks any definition with no instances as unused and offers "Prune Unused" to delete them in one pass - useful after importing a file whose source tool left definitions behind. Deleting a symbol that is in use detaches its instances rather than silently removing artwork.

FAQ

How is a symbol different from a group?

A group is one piece of artwork. A symbol is a definition that any number of instances reference, so editing it updates every placement at once - and the exported file stores the geometry once.

What is a variant axis?

A named dimension with a list of values, like state = default, hover, pressed. Add two axes and the symbol carries every combination of them; an instance picks one. The first value of each axis is the default, and undrawn combinations fall back to it.

Can I animate between two variants?

Yes. Add an instanceVariant track to the instance and keyframe it from one variant to another. The export turns the difference between the two into real animations - position, size, color, stroke and path data - and cross-fades the parts that cannot be interpolated.

What does a symbol look like in the exported SVG?

A `<symbol>` element in `<defs>` and a `<use href="#id">` for each instance, which is the native SVG 2 mechanism. Nothing proprietary is added.

Can I change one instance without changing the rest?

Yes. Instances carry per-shape overrides that merge on top of the definition, so one placement can differ in fill or another property while still following the definition for everything else.