如何将网站演示录制为类似Stytch示例的动画SVG？

下面是几种可行的方案，帮你实现类似的效果：

1. 先录制成视频，再转成动画SVG #

• 先用系统自带的录屏工具或第三方屏幕录制软件，把网站演示录成MP4/WebM格式的视频。
• 使用视频转SVG的工具（比如svg-video-converter类工具）将视频文件转换为动画SVG。这类工具会把视频帧编码进SVG，通过SMIL动画或CSS动画实现逐帧播放。
• 注意：这种方式生成的SVG体积可能偏大，建议先对视频做压缩处理，比如降低分辨率、缩短时长，再进行转换。

2. 基于浏览器API直接生成动画SVG #

• 利用getDisplayMedia API捕获浏览器页面画面，通过Canvas的toDataURL方法逐帧获取截图。
• 将这些截图作为SVG的<image>元素，再通过CSS关键帧动画或SMIL的<animate>元素控制图片切换，实现动画效果。
• 示例思路代码：

// 捕获当前页面画面
const stream = await navigator.mediaDevices.getDisplayMedia({ preferCurrentTab: true });
const video = document.createElement('video');
video.srcObject = stream;
await video.play();

// 创建Canvas用于截图
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const ctx = canvas.getContext('2d');

// 收集页面帧
const frames = [];
const captureInterval = setInterval(() => {
  ctx.drawImage(video, 0, 0);
  frames.push(canvas.toDataURL('image/png'));
}, 100); // 每100ms捕获一帧，可按需调整帧率

// 停止捕获后生成SVG
setTimeout(() => {
  clearInterval(captureInterval);
  stream.getTracks().forEach(track => track.stop());
  
  let svgContent = `<svg width="${canvas.width}" height="${canvas.height}" xmlns="http://www.w3.org/2000/svg">`;
  // 添加所有帧并设置动画逻辑
  frames.forEach((frame, index) => {
    svgContent += `<image href="${frame}" opacity="0" width="100%" height="100%">`;
    svgContent += `<animate attributeName="opacity" values="0;1;0" dur="0.1s" begin="${index * 0.1}s" fill="freeze"/>`;
    svgContent += `</image>`;
  });
  svgContent += `</svg>`;
  
  // 此处可将svgContent保存为本地SVG文件
  console.log(svgContent);
}, 5000); // 捕获5秒的页面演示，可按需调整时长

3. 使用网页转动画SVG的专门工具 #

有些工具会专门记录页面DOM变化、CSS属性动画，再将这些逻辑转换成SVG内的动画，生成的SVG体积比逐帧截图更小：

• 你可以选择本地桌面工具或在线服务（注意隐私，避免上传敏感内容），这类工具能一站式完成网页录制到SVG生成的流程。

需要注意，动画SVG的兼容性略逊于普通SVG，部分旧浏览器可能无法正常播放SMIL动画，此时可以用CSS动画替代，或提供GIF/视频作为降级方案。

内容的提问来源于stack exchange，提问作者Ryan