Function exportToSvg

yaml-flow-editor/src/utils/image.ts:107–141

* Export as SVG (vector graphics, infinitely scalable) * Manually adds background rectangle to ensure white background

(
  element: HTMLElement,
  width: number,
  height: number,
  viewport: { x: number; y: number; zoom: number },
  options: Required<ExportOptions>
)

 * Manually adds background rectangle to ensure white background
 */
async function exportToSvg(
  element: HTMLElement,
  width: number,
  height: number,
  viewport: { x: number; y: number; zoom: number },
  options: Required<ExportOptions>
): Promise<string> {
  const svgDataUrl = await toSvg(element, {
    backgroundColor: options.backgroundColor,
    width: width,
    height: height,
    style: {
      width: `${width}px`,
      height: `${height}px`,
      transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`,
      border: 'none',
      outline: 'none',
      fill: 'none',
    },
    filter: createNodeFilter(),
  });

  // Decode data URL to get SVG content
  const svgContent = decodeURIComponent(svgDataUrl.split(',')[1]);
  
  // Insert background rectangle after <svg> tag
  const bgRect = `<rect width="100%" height="100%" fill="${options.backgroundColor}"/>`;
  const modifiedSvg = svgContent.replace(
    /(<svg[^>]*>)/,
    `$1${bgRect}`
  );

  // Re-encode as data URL
  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(modifiedSvg)}`;
}

/**
 * Export as PDF