---
name: "dom-to-image-svg-dataurl"
description: "Render DOM trees into SVG data URLs, PNGs, and JPEGs with pure JavaScript."
metadata:
  author: "Anatolii Saienko"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "convert dom to svg dataurl"
  - "export html node to png"
  - "screenshot element dom-to-image"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# dom-to-image Pure JS SVG DataURL Generator

Clones HTML DOM trees, inlines external stylesheets and fonts as base64 data URLs, and renders nodes into SVG foreignObject containers for fast client-side rasterization.

## When to Invoke
Invoke this skill whenever you need to:
- convert dom to svg dataurl
- export html node to png
- screenshot element dom-to-image

## Execution SOP & Rules
1. Invoke domtoimage.toPng(node).then(dataUrl => ...).
2. Ensure all external web fonts are loaded prior to invoking screenshot export.
3. Filter out unwanted elements (e.g. delete buttons) using the filter callback parameter.
4. Handle large DOM trees gracefully by avoiding excessive deep nested node hierarchies.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.