FAQ

Why is the output an SVG and not a PNG / WebP / WebM?

Three reasons. Scaling: vector text and shapes render crisply at retina, at zoom, and on print. File size: a 30 KB SVG beats an equivalent-quality video for short loops, especially after gzip. Embedding: SVG drops into <img>, plays without JavaScript, and works in environments that block scripts (Markdown renderers, RSS readers, email clients in some cases).

Does it work in Firefox / Safari?

Yes. The SVG output uses standard CSS keyframes and SVG primitives — every modern browser plays it identically. Capture is Chromium-only (Domotion uses Playwright's Chromium internally), but the output is engine-agnostic.

Can I capture on Linux / Windows?

Yes for capture and rendering, but path-mode font fidelity is best on macOS. The bundled font lookup table is tuned to Apple system fonts; on Linux / Windows the path renderer falls back to native SVG <text> when no matching font is found, which means the output looks like whatever font the rendering browser has.

For cross-platform CI, a common pattern is "capture on macOS runners, deploy the SVGs anywhere".

Do I need to install Playwright separately?

No. Domotion already depends on @playwright/test at a known version. The Chromium binary is auto-installed on first use of launchChromium() or DemoRecorder. You can pre-install it explicitly if you want to:

npx playwright install chromium

Can the SVG respond to clicks or hover?

Out of the box, no — the output is a static SVG with looping CSS animations. If you embed via inline SVG or <object>, you can hand-edit the markup to add <a> elements with href attributes, or :hover styles in the embedded <style> block. Domotion doesn't generate those for you.

Can I pause the animation?

Not from inside the SVG. Animations always loop. To control playback from the host page, embed via <object> or inline SVG and use the host's CSS to set animation-play-state: paused on the SVG elements you want to pause.

How do I make the animation respect prefers-reduced-motion?

Domotion doesn't currently emit a guard for it. Wrap the embed in a <picture> with a media="(prefers-reduced-motion: reduce)" source pointing to a single-frame still SVG. See Embed SVGs in your site.

Can I capture an iframe inside my page?

Not directly. Domotion captures the visible DOM under a selector; iframe content lives in a separate document and isn't walked. Either capture the iframe's URL directly as its own SVG, or pre-render the iframe's content inline.

Why is my backdrop-filter ignored?

SVG has no equivalent — the standard <filter> primitives operate on a region's own pixels, not on what's behind it. The backdrop-filter region is captured but not painted. A capture warning is logged so you can find it. For a faithful result, screenshot the affected area and inline it as an <image>.

The output SVG references absolute URLs / file paths. Why?

Most asset URLs (images, background-image url() values, list-style-image) are inlined as base64 data URIs at capture time so the SVG is self-contained. If you see a remaining external URL, it's typically because the asset was at an http:// / https:// URL, which is left as-is. Pre-fetch and inline manually if you need full self-containment for those.

Can I use this for snapshot testing my UI?

It's not what Domotion is optimized for, but yes — capture an HTML state, hash the SVG output, compare. Two caveats: SVG output is sensitive to sub-pixel layout differences, so test runs on different machines may produce slightly different bytes; and Domotion's rendering invariants change in patch releases as new CSS support lands. Pin Domotion to an exact version for snapshot testing.

What's the license?

MIT. Commercial use, modification, and redistribution are all fine — see the LICENSE file in the repo for the full text.

Why "Domotion"?

"DOM" + "motion". The pipeline is "DOM in, motion out".

How do I report a bug or request a feature?

File an issue with: the input HTML, the output SVG, what you expected, and the output of logCaptureWarnings(). The Troubleshooting page has the bug-report template at the bottom.