PerfectVector
By Irene Kim9 min read

Synfig SVG Import: Prepare Editable Animation Layers

Compare direct SVG import with Inkscape's SIF export for Synfig. Inspect layers, colors, and separate moving parts before building your animation or rig.

On this page

Synfig can import SVG through File → Import, but you should check the resulting layers before animating. Its SVG import documentation also describes an Inkscape-to-SIF route when direct import does not reproduce the artwork usefully.

Those are two ways to transfer vector artwork. Neither one creates the movement plan for you. An imported desk lamp may look correct while its shade, arms, and base remain awkward to select or rotate independently.

Start with one object, decide which parts should move, and compare the imported result with the SVG master. A short layer and motion check is more useful than importing an entire scene and discovering the structure later.

Choose direct SVG import or an SIF copy

Try direct import first when you already have an SVG. Keep the original open in its source editor so that you can compare shape, paint, and organization.

RouteFile you bring into SynfigWhat to inspect
Direct SVG importYour .svg exportVisible artwork, editable geometry, layer structure, and scale
Inkscape SIF exportA separate .sif copyExported layer groups, fills and outlines, then the same visual checks
Raster importA supported image fileWhether moving a flat image is sufficient for the shot

The SIF option is still represented in Inkscape's official Synfig output extension definition. It declares Synfig Animation (*.sif) and marks the export as potentially lossy. Check that your installed Inkscape build offers that format; the existence of an exporter does not guarantee that every installation exposes it identically.

Use the route that preserves the appearance and editing structure you need. SIF is not a promise of perfect SVG compatibility, and a visible SVG import is not yet a rig.

Plan the moving pieces before exporting

Consider an original desk lamp with a base, a lower arm, an upper arm, and a shade. The base stays still. The arms rotate at joints, and the shade tilts at its attachment.

In the source editor, keep those parts separate and give the layers descriptive names. Put the artwork that should move together in the same part. If a shade has a fill and a decorative outline, both should follow the shade's movement.

Also draw enough of each part to support the intended poses. An SVG containing only the visible edge of an arm cannot supply hidden artwork when you swing the shade away. You may need to extend the covered region manually.

Conceptual desk-lamp diagram separating its base, articulated arms, and shade for an animation plan.
Planning illustration, not a Synfig import or rig. Inspect the actual layers and set their pivots before animating.

The diagram describes the intended organization. It does not predict the number of layers an importer will create. Inkscape's SIF exporter code can create separate region and outline layers from a path's fill and stroke. One source part can therefore require several resulting layers to move together.

A color-based trace can organize the artwork differently from your movement plan, too. Two dark arms might be part of one compound shape. Separate the geometry you actually need rather than assuming every recognizable object has its own layer.

Make a small direct-import check

Save a delivery copy containing just the lamp, then import it into a fresh Synfig document through File → Import. Before adding animation, work through four checks:

  1. Compare the overall silhouette and the artwork's size against the canvas.
  2. Expand the layer hierarchy and locate one arm or the shade.
  3. Temporarily hide that part to see exactly which artwork it contains.
  4. Restore visibility and make a small temporary movement, then undo it.

If hiding the shade also hides an arm, inspect the grouping. If moving the shade leaves its outline behind, collect the layers that form that part before continuing. These simple probes reveal the structure without requiring a finished animation.

Check paint separately from geometry. A correct outline with the wrong fill is a different problem from missing artwork. Compare colors, opacity, visible strokes, and holes against the source. Keep any correction in a working copy so you can return to the original.

For animation formats with different native geometry, the OpenToonz vector workflow shows why an editable filled boundary and an editable centerline offer different controls. Do not assume that an importer's layer count tells you what kind of edit each layer supports.

Try Inkscape's SIF export when it helps

If your Inkscape installation offers Synfig Animation (*.sif) in Save As, save a separate SIF copy and open that copy in Synfig. Keep the editable SVG master. Synfig's Inkscape conversion guide describes this route and the relationship between Inkscape layers and Synfig Group Layers.

The current exporter implementation also treats an Inkscape layer as a named container for its converted contents. That makes deliberate source layers useful for the lamp, but you still need to inspect the result. Ordinary SVG groups and Inkscape layers are not interchangeable promises about the final hierarchy.

Compare the SIF copy with the direct import using the same checks. Can you select the shade? Do its paint and outline stay together? Are the overlaps intact? Choose based on those results rather than on which file extension sounds more native.

Avoid turning an old compatibility list into a universal rule. The Synfig wiki page includes an older XSLT conversion method with its own restrictions. Those restrictions do not automatically describe the direct SVG importer or today's Inkscape exporter. For a troublesome file, reduce a copy to simple filled shapes and add its more complex features back one at a time.

Set group origins before a motion test

Synfig's Group Layer documentation describes a container that transforms its child layers together. Its transformation controls include rotation, offset, skew, and scale. Group the pieces that belong to a single moving lamp part before you test that part's rotation.

Place the rotation center at the intended joint. The documented Group Transformation Widget lets you hold Ctrl while dragging the transformation center to change the Origin independently of the group. Check the effect on your selected group before animating it.

For the shade, a center in the middle of its silhouette produces a different movement from a center at the arm attachment. Try a small rotation on a working copy. Look for detached outlines, gaps at the joint, or artwork moving around the wrong point, then undo the test.

This establishes an editing starting point. Parent-child motion, bones, timing, and interpolation still need their own setup. Importing an SVG or exporting an SIF does not recover a pre-existing rig from a flat illustration.

If the import is blank or the colors change

Use the symptom to narrow the investigation:

SymptomFirst check
Nothing is visibleLayer visibility, artwork bounds, canvas scale, and whether the source contains usable geometry
Outline visible but fill wrongSource fill, opacity, and the imported paint layers
Some parts disappearThe missing part's structure or effect, tested in an isolated copy
Everything moves togetherWhich group is selected and which parts it contains
A part's outline stays behindWhether the fill and outline need grouping for that movement

The blank SVG diagnosis covers viewport, visibility, and unsupported-content checks. Preserve good paths while diagnosing them. Converting the entire artwork to PNG and tracing it again discards structure that may still be useful.

Record the Synfig version, Inkscape version if used, chosen import route, and one small file that reproduces the issue. An old forum report about color or grouping is a clue to investigate, not evidence that every current installation has the same problem.

Where PerfectVector fits

If the only source is a flat PNG or JPG illustration, PerfectVector's image-to-vector workflow can reconstruct editable SVG paths before the Synfig handoff. Inspect the silhouette and separate the regions you plan to move, then test one import. The result still needs layer organization, joint placement, and animation setup in Synfig.

Keep an existing editable SVG rather than tracing a screenshot of it. Painted backgrounds can stay raster when their texture matters and you only need to position or move the image. Synfig documents a separate Import Image Layer for image content. For a different native tracing workflow, see Adobe Animate image tracing; the broader vectorization explainer distinguishes recovering paths from recovering the original design structure.

FAQ

Can Synfig import SVG files? Yes. Use File → Import, then inspect the visible artwork and resulting layer structure. Synfig's documentation also describes an Inkscape-to-SIF route as an alternative when direct import does not reproduce the file usefully.

Should I use SVG or SIF for a Synfig animation? Keep the SVG master and compare a direct import with a separate SIF export when that option is available in your Inkscape installation. Choose the result whose appearance and editable parts fit the animation. Neither route creates a rig automatically.

Why is my SVG blank or miscolored in Synfig? Check visibility, bounds, scale, fills, opacity, and the structure of the missing part. Test a simple copy to separate a file-specific feature from a broader import issue. Preserve the original and record your app versions and import route.

Does importing an SVG create separate moving parts? Inspect the actual layers rather than assuming it does. One source part can produce multiple paint layers, and several visible parts may share geometry. Organize each moving part, set its origin, and test a small movement before adding animation.

Sources

  1. Synfig — SVG import and Inkscape conversion — Documents direct import and the alternative SIF route, alongside historical conversion methods.
  2. Inkscape — Synfig output extension definition — Registers the SIF output format and marks export as potentially lossy.
  3. Inkscape — Synfig exporter implementation — Shows layer-container handling and separate fill/outline conversion.
  4. Synfig — Group Layer — Defines grouped-layer transformations and their parameters.
  5. Synfig — Group Transformation Widget — Documents adjustment of the group's Origin independently from its artwork.
  6. Synfig — Import Image Layer — Documents the separate layer for imported image content.

Starting from raster artwork? Prepare its SVG paths with PerfectVector, inspect the regions you intend to move, and test one part in Synfig before building the rest of the animation.

More from the blog

Start with a cleaner SVG
that is easier to edit