HTML to editable SVG and Figma with SnapDOM Vector

From a shipped component to editable artwork

To edit a captured component in a design tool, its labels need to remain text and its shapes need to remain shapes. PNG exports keep pixels. Core SVG captures embed HTML in a foreignObject.

SnapDOM's Vector plugin reconstructs supported browser text and geometry as standalone SVG artwork. Its Figma clipboard export provides another destination for that capture. The plugin reads the rendered DOM to measure text and shapes.

Three outputs with different jobs

PNG: a picture of the component

Use PNG to show someone how the component looks. They can view the image, but they cannot edit its labels as text or move its shapes separately.

SnapDOM’s regular SVG: HTML stored inside an SVG file

toSvg() keeps the captured HTML inside an SVG container, using foreignObject. This is useful for displaying the capture in a compatible browser. A design tool may not support that HTML content.

Saving the file as SVG does not make the component’s text and shapes editable in Figma.

Vector plugin: text and shapes you can edit

toVector() converts supported parts of the component into SVG text and shapes. Use it when someone needs to change a label or edit the artwork in a vector editor.

For Figma, use the plugin’s separate toFigma() clipboard export. Check the pasted result: fonts and some visual effects may differ from the browser.

Check how the SVG stores its content before sending it to a vector editor. The HTML-to-SVG recipe describes the capture route. Vector is a separate plugin with a different output contract.

Try a product card, then inspect the SVG

Edit the product name, export the card and download its SVG. Open it in your vector editor, find the title and try changing it. The demo reports how many SVG text elements and foreignObject elements the exported file contains; check the imported result in the editor you use.

For charts and inline illustrations, use the Vector playground. Start with ordinary text, borders and gradients before moving to effects that your destination may approximate.

Install and capture once

npm install @zumer/snapdom@3 @zumer/snapdom-plugins@4

import { snapdom } from '@zumer/snapdom';
import { vector } from '@zumer/snapdom-plugins/vector';
const card = document.querySelector('#product-card');
const result = await snapdom(card, { plugins: [vector()] });
const svg = await result.toVector();
// Wire this after capture has finished, on HTTPS or localhost:
copyButton.addEventListener('click', () => result.toFigma());

toVector() returns an SVG string. toFigma() writes the clipboard and resolves without returning artwork. Keep the source connected through export. Register the plugin on the captures that need it. The public plugin option is exclude; do not copy historical internal engine settings into your application.

The Figma handoff

Generate first, click Copy to Figma, then paste into a Figma design file. Clipboard access requires HTTPS or localhost and browser permission. A successful clipboard write confirms transport; inspect the pasted layers separately. Paste is a separate step inside Figma.

The public clipboard route does not require installing the optional development Figma plugin. That separate consumer accepts the internal SVD-derived payload and offers font preflight; It consumes that payload rather than arbitrary SVG.

Verify that the title is editable, the intended font is available, gradients and shadows look right, and the group contains the expected layers. The exported layers are positioned. Add Auto Layout, reusable components and design tokens in Figma if the design needs them.

Font and effect fidelity are part of the review

Editable text needs an available font. Figma distinguishes missing fonts from fonts not yet loaded, and its text API documentation explains why a text node can appear correct yet still need its font before editing. Plan a fallback with the recipient rather than silently substituting it.

SVG and Figma are different renderers. Unsupported paint can be diagnosed or approximated by the conversion engine. Review complex masks, filters, text shaping and clipped content in the actual destination. The export contains the chart artwork; keep its data in the application.

For a designer-developer handoff, retain a PNG reference beside the vector file. Compare it with the imported artwork to spot rendering differences.

Next steps and sources

Read capture options and capture boundaries before exporting a real component. For document output, use the PDF comparison. For an agent checking the implementation against a reference, see the Claude Code workflow.

Sources checked October 5, 2026: Vector public API, clipboard adapter, optional Figma consumer, and plugins 4.0.0.

SnapDOM Vector vs html.to.design

The html.to.design plugin by divRIOTS documents a URL-import workflow, viewport selection and a Chrome extension for pages behind login. That is useful when the job starts inside Figma with an existing website.

SnapDOM Vector starts inside the running app: your code selects an element and exports it through the capture pipeline. Use it for a component export button or a handoff from the app. Compare the same component in Figma before choosing a tool.