用途：preview-svg 用于在可控的浏览器预览中渲染任意动画 SVG，面向“用可视化方式讲解复杂概念”的场景。它支持 SMIL（<animate>、<animateTransform>、<animateMotion>）、<style> 内的 CSS keyframes/transitions，以及内联 JS。
主要能力：内置播放/暂停（SMIL 用 pauseAnimations()，CSS 用 animation-play-state）、重启（setCurrentTime(0) 并重放 CSS 动画）、时间轴拖动（仅 SMIL 可 seek）、鼠标滚轮缩放（0.2x–20x）与拖动平移（通过 viewBox）、代码查看、导出当前 SVG。预览舞台将 SVG 缩放至视口 90%，显示棋盘格背景，剥离根 SVG 的 width/height 并依赖 viewBox；无 <svg> 根的片段会被包进默认 400×400 的 SVG。头部显示行数、字符数、自动检测的特性（SMIL、CSS anim、JS 或 static）与估算时长。
使用方式：把 SVG 内容通过管道传给脚本，或传入文件路径。示例：cat heartbeat.svg | ./run.sh；./run.sh diagram.svg；跳过浏览器只输出路径用 ./run.sh diagram.svg --no-browser。也可用 /preview-svg heartbeat.svg 或 cat animation.svg | /preview-svg。渲染器会自动在浏览器打开结果，不要手动打开文件。
适用场景：可视化讲解概念（梯度下降、请求流程、数据结构）、图标或 logo 动画（路径绘制、形变、汉堡↔X）、沿路径运动（<animateMotion> + <mpath>）、加载指示器/进度环/氛围背景原型，以及无脚本的交互 SVG（SMIL begin="el.click"）。交互式 D3/JS 可视化建议用 preview-d3，3D/WebGL 用 preview-threejs，流程图/时序图用 preview-mermaid。
限制与注意：时间轴拖动仅对 SMIL 有效，纯 CSS 动画只能暂停不能 seek；路径形变要求源与目标 d 的命令序列一致，否则无法插值；动画不播放时检查 <animate> 是否位于目标元素内、@keyframes 名称是否匹配，SMIL 解析错误在 DOM 中静默，需看控制台；避免在 <text> 中混排 emoji，建议用真实 SVG 图形；布局上建议先声明网格坐标、为图标预留间距、同一列统一 text-anchor、边缘留出至少 5% 内边距；非必要动效可用 @media (prefers-reduced-motion: reduce) 关闭；不要动画 width/height/top/left 等布局属性，优先 transform 与 opacity。输出路径为 .preview-skills/svg/{filename}.html。