xd-extract-svg 用于从 Adobe XD 设计中提取矢量图形并转换为 SVG。它不依赖查看器画布截图,而是下载查看器绘制的场景图 JSON(AGC),将节点树转换为 SVG 后进行校验。
用途:从 Adobe XD 分享链接或 .xd 文件中提取图标、插画、Logo 或整个画板等矢量内容,输出为 SVG。
主要能力:提供 inventory(列出画板顶层节点及边界框、主填充色、形状数、警告码)、extract(按节点名或映射文件提取单个或多个节点)、validate(校验输出,可检查同一框架)和 redact(脱敏)。支持按颜色查找节点、预览选择候选、处理同名节点时指定画板。输出为 SVG;图像填充以 data URI 嵌入(大文件可通过 --max-embed-bytes 限制),文本以实时 <text> 输出并需要字体;角度渐变、背景模糊、内阴影暂未转换(对象模糊已支持),工具以警告报告。
使用方式:通过 npx -y xd-extract <command> 运行,或全局安装后使用 xd <command>。需要 Node >= 22。典型流程:先用 inventory 列出节点(可加 --json),用 --find 按颜色查找,用 --preview 生成预览让用户选择;然后用 extract 指定节点和输出路径,或通过 map.json 批量提取;最后用 validate 校验,并在浏览器中打开预览进行视觉检查。失败时根据错误码处理:NoVectorPayload 表示链接仅含栅格原型,应停止;PrivateLink 可尝试 --browser 或请求公开链接;TokenExpired 需新链接;TargetNotFound/AmbiguousTarget 需从错误列表中选择节点或加 --artboard。警告如 unsupported-fill、unsupported-stroke、unsupported-shape 等表示输出缺失内容,需报告用户。
适用场景:设计交付中需要将 XD 中的矢量资产转为 SVG 时;需要批量提取多个图标或插画时;需要校验 SVG 输出并记录警告时。
限制:仅输出 SVG;部分效果暂不支持,可能产生警告或校验失败;文本需要字体;图像填充嵌入受大小限制;私有链接或过期链接需重新获取;不提供栅格截图或描摹替代。应始终进行视觉检查,不要将画布截图或手绘近似当作提取的矢量。导出写入专用目录,避免覆盖项目资产;不要提交导出文件或预览页,除非被要求。--record 和 redact 操作会涉及完整设计 JSON,记录文件切勿提交。