Export editable vector artwork.

See what changes in each format

Browsers, SVG and Figma do not support the same effects. The plugin tells you when it had to adapt, rasterize or omit something, and identifies the affected layer. You can review those changes before handing the file to a designer or a client.

Exact

The destination can reproduce the layer as editable vector content.

Adapted

The layer remains vector, but an effect was translated to the closest available equivalent.

Rasterized or omitted

The effect has no usable vector equivalent. The report names the layer and explains what happened.

The clearest case is backdrop-filter: frosted glass is a blur of whatever sits behind the panel, and SVG has no way to express that, so the panel arrives as a flat colour. The report names the layer, and the limits list it.

Read about fidelity reports

Built from the browser's resolved layout

Grid, flexbox, sticky positioning and container queries are already resolved on screen. The plugin measures that result instead of trying to implement another CSS layout engine.

Editable output

Text remains text. Gradients, borders, radii, shadows, transforms, images and DOM hierarchy become vector paint and usable layers.

Browser layout

Boxes, text lines and baselines are measured from the rendered page, including grid, flexbox, pseudo-elements and open shadow DOM.

Private by design

The plugin runs in the browser, including authenticated and staging pages. Captures are not uploaded to a server.

Tested output

729 checks over 19 fixtures. Fixtures are emitted, rendered and compared against screenshots of the live elements.

Two methods on a SnapDOM capture

Register the plugin on a capture and it gains toVector() and toFigma(), alongside toPng() and toCanvas(). The only option is exclude.

import { snapdom } from '@zumer/snapdom'
import vector from '@zumer/snapdom-plugins/vector'

const shot = await snapdom(document.querySelector('#plan-card'), {
  plugins: [vector()]
})

const svg = await shot.toVector()   // standalone SVG, no foreignObject, text is text
await shot.toFigma()                // on the clipboard: paste it into Figma

Read the reference

An SVG file, or a paste into Figma

Both come from the same capture of the page, and neither needs a server or an install.

Included in the SnapDOM monorepo

The Vector plugin is available as MIT-licensed source in packages/plugins/vector. PDF and Vector are available on npm in @zumer/snapdom-plugins 4.x and require SnapDOM 3.x.

Read the reference · SnapDOM on GitHub

Questions