Quick start

From npm install to a rendered SVG in one command.

The fastest way to capture an SVG is the domotion CLI. No TypeScript, no Playwright bring-up — point it at a URL or HTML file and it writes the SVG.

1. Install

npm install -g domotion-svg

(Or npm install domotion-svg in a project and use npx domotion.) Chromium auto-installs the first time you run a capture; nothing else to set up.

2. Capture your first SVG

Capture a real URL straight to disk:

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

Open example.svg in any browser. Zoom in: every glyph and border stays crisp because it's a vector, not a screenshot. The file is self-contained — no external CSS, no font requests, no JavaScript runtime.

3. Resize, clip, target a region

Capture only a piece of a page at a tighter viewport:

domotion capture https://example.com \
  --width 1280 --height 720 \
  --selector ".hero" \
  --optimize \
  -o hero.svg

Flag	Effect
`--width` / `--height`	Viewport size in CSS pixels.
`--selector`	Capture only the matching element (default `body`).
`--clip` `x,y,w,h`	Capture a rectangle within the viewport.
`--scroll` `x,y`	Scroll the page before capture.
`--wait-for` `".ready"`	Wait for a selector to appear.
`--optimize`	Run output through SVGO (typically 30–50% smaller).

Run domotion --help for the full list, or see the CLI reference.

4. Capture a local HTML file

Already have HTML on disk? Pass the path. Domotion serves it via a file:// URL so relative assets keep working:

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

Or stream HTML on stdin — handy in shell pipelines:

cat demo.html | domotion capture - -o demo.svg

5. Animate multiple frames

For a multi-frame animated SVG, write a small JSON config and run domotion animate:

// demo.json
{
  "width": 800,
  "height": 400,
  "output": "demo.svg",
  "optimize": true,
  "frames": [
    {
      "input": "./step-1.html",
      "duration": 1500,
      "transition": { "type": "crossfade", "duration": 300 }
    },
    {
      "input": "https://example.com/step-2",
      "duration": 2000,
      "transition": { "type": "push-left", "duration": 400 },
      "actions": [
        { "type": "click", "selector": ".btn-next" },
        { "type": "wait",  "ms": 300 }
      ]
    }
  ]
}

domotion animate demo.json

Each frame can come from a local file or a URL. actions drive the page (click, fill, scroll, hover, press) before the frame is captured — so you can record before/after states of a real interaction. See Build an animated demo for the full recipe.

What's next

Your first capture — a longer walk-through with screenshots and the most common gotchas.
CLI reference — every flag, every action, every transition type.
Capturing your real product UI — drive a running dev server, log in, navigate, capture.
JS API — when you outgrow the CLI (custom interaction loops, programmatic frame composition, custom overlays).