The Complete Production SOP: How to Deploy and Run dom-to-image Pure JS SVG DataURL Generator in Autonomous AI Agents

---
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
---

import domtoimage from 'dom-to-image-more';

export interface ExportOptions {
  quality?: number;
  bgcolor?: string;
  excludeClasses?: string[];
}

export async function exportNodeToSvgDataUrl(node: HTMLElement, options: ExportOptions = {}): Promise<string> {
  await document.fonts.ready;
  
  const filter = (child: Node): boolean => {
    if (child instanceof HTMLElement && options.excludeClasses) {
      return !options.excludeClasses.some(cls => child.classList.contains(cls));
    }
    return true;
  };

  return domtoimage.toSvg(node, {
    filter,
    bgcolor: options.bgcolor || 'transparent',
    quality: options.quality ?? 0.95
  });
}

import React, { useRef } from 'react';
import { exportNodeToSvgDataUrl } from '../utils/exporter';

export const ReportCard = () => {
  const cardRef = useRef<HTMLDivElement>(null);

  const handleDownloadSvg = async () => {
    if (!cardRef.current) return;
    const dataUrl = await exportNodeToSvgDataUrl(cardRef.current, {
      excludeClasses: ['no-export', 'action-btn']
    });
    const link = document.createElement('a');
    link.download = 'analytics-card.svg';
    link.href = dataUrl;
    link.click();
  };

  return (
    <div ref={cardRef} className="p-6 bg-white rounded-xl shadow-md">
      <h2 className="text-xl font-bold">System Metrics</h2>
      <p>Throughput: 98.4% nominal</p>
      <button onClick={handleDownloadSvg} className="action-btn mt-4 px-4 py-2 bg-blue-600 text-white rounded">
        Export Vector
      </button>
    </div>
  );
};