Your first capture

The Quick start got you a working SVG with one command. This page slows down and explains each knob you'll reach for on a real capture: viewport sizing, ready-state waits, subtree targeting, and how to inspect what came out.

The CLI in one line

domotion capture <input> [options] -o out.svg

<input> is a URL, a local HTML file, or - to read HTML from stdin. The flags below shape what gets captured.

Picking a viewport size

The viewport is what Chromium thinks the browser window is. It controls media queries, layout flow, and where breakpoints kick in. For a marketing hero you probably want a fixed width that matches your final embed:

domotion capture https://example.com \
  --width 1200 --height 600 \
  -o hero.svg

For a mobile-style screen, just pass a phone-shaped viewport:

domotion capture https://example.com \
  --width 390 --height 844 \
  -o phone.svg

Waiting for the page to be ready

Captures are computed-style snapshots — whatever Chromium has painted at the moment of capture is what ends up in the SVG. If your page loads fonts, fetches data, or runs entry animations, you need to wait for them to finish first.

The --wait-for flag is the one to reach for first whenever a capture is "almost right but missing the last bit":

domotion capture http://localhost:3000/dashboard \
  --wait-for ".chart .data-loaded" \
  -o dashboard.svg

Pausing running animations

Page-level CSS animations make captures non-deterministic. Pause them deterministically by injecting a tiny stylesheet — most easily via the JS API if you control the page, or by adding a one-off animation-play-state: paused rule to the page itself. The CLI doesn't (yet) have a flag for this.

Capturing a specific subtree

You don't have to capture the whole body. Two ways to scope:

--selector — only this element

domotion capture https://example.com \
  --selector ".hero-card" \
  --width 1200 --height 800 \
  -o hero.svg

The SVG is the size of the matched element's bounding box. Surrounding chrome is excluded.

--clip — a rectangle of the viewport

domotion capture https://example.com \
  --width 1200 --height 800 \
  --clip 40,200,400,200 \
  -o slice.svg

Capture only the rectangle (x=40, y=200, w=400, h=200) within the rendered viewport. Useful for cropping out a single card from a busy layout.

Capturing scrolled content

If the content you want is below the fold, scroll first:

domotion capture https://example.com \
  --scroll-to 0,800 \
  -o below-the-fold.svg

The viewport rectangle is captured at its post-scroll position.

Capturing a local HTML file

Already have HTML in your repo? Pass the path. Domotion serves it via a file:// URL so relative <img src="..."> and stylesheet links keep working:

domotion capture ./demo.html -o demo.svg

Or pipe HTML on stdin — useful when an upstream build step generates the markup:

node build-card.js | domotion capture - --width 600 --height 200 -o card.svg

Inspecting capture warnings

Some CSS features fall back to a rasterized tile when there's no faithful SVG representation (backdrop-filter, complex clip-path: path(...), certain blend modes, writing-mode: vertical-rl for now). Domotion records a warning when this happens; pass --warnings to see them:

domotion capture https://example.com --warnings -o site.svg

Each warning identifies the offending selector and feature. The SVG still renders — the affected region just falls back to an embedded raster image. See CSS Support for the full list of raster-fallback features.

Saving and inspecting the output

Open the SVG in any browser to verify, or in your editor to see the structure. Domotion's output is human-readable — element groups, named clip paths, glyph defs at the top — so it's straightforward to diff between captures.

For a smaller production build, run with --optimize:

domotion capture ./demo.html --optimize -o demo.svg

SVGO trims whitespace and reduces decimal precision. Skip it while iterating (you'll want diff-friendly output) and turn it on for the final artefact.

Next steps

• CLI reference — every flag, every action, every transition type.
• Capture your real product UI — drive a running dev server, log in, capture an authenticated screen.
• Build an animated demo — the multi-frame story with the animate command.
• JS API — for when you outgrow the CLI's action vocabulary or want to compose frames programmatically.