SuperAPI AI 工具集

xd-validate-svg

设计与创作

查看项目

更新于 10-24 16:17

技能介绍

用途:xd-validate-svg 用于校验从 Adobe XD 提取的 SVG 文件,属于 xd-extract 工作流的一部分,侧重在提取之后、交付之前发现明显的结构错误与渲染错误。

主要能力:

  • XML 与结构检查:识别 xml-invalid、not-svg;检查 no-viewbox、empty-svg;检查 shape-missing-fill(图形没有显式填充,渲染为黑色)、line-without-stroke(line 元素不绘制任何内容)、group-in-clippath(clipPath 内出现 g 元素)、nan-number(属性含 NaN 或 Infinity)。
  • resvg 光栅检查:render-failed、render-empty,用于发现完全渲染失败或没有任何绘制内容的情况。
  • 与提取报告联动:xd extract 会写出 SVG 旁的文件 <file>.svg.report.json,validate 会自动读取,使提取阶段的告警与画框规则参与检查;需保持报告文件与 SVG 位于同一位置。
  • 提取缺失检测:extraction:unsupported-fill:*(以及 -stroke、-shape、-node)以 error 级别提示图形从 SVG 中缺失。
  • 警告类发现:edge-band-drift(一侧边缘色带为空而相对侧有内容,疑似遮罩漂移或画框偏心)、tight-frame(内容框贴近四边,描边可能被裁剪)、extraction:<other>(文本字体未嵌入、左对齐文本宽度被估算、背景模糊或内阴影未转换、线或开放路径的描边对齐按居中渲染等)。警告属于可疑情况,可能是合法图形,需人工判断。
  • 画框一致性:使用 --expect-same-frame 时,尺寸差异超过 1.5 px 会报告 frame-mismatch。

使用方式: 命令为 npx -y xd-extract validate out/*.svg [--expect-same-frame] [--json]。退出码 0 表示无错误(可能仍有警告),1 表示至少存在一个错误;需要 Node >= 22。

适用场景:适合在批量导出 SVG 后自动执行,用于拦截不可渲染、空渲染、全黑、缺描边、缺 viewBox 或提取不完整等明显问题;配合 --json 便于在脚本或流水线中消费结果。

限制与注意事项:校验只能消除明显失败,不能证明图形正确,仍需查看像素(例如用 xd inventory <source> --preview,或在浏览器中打开 SVG)。不要为了让向量图匹配已有 PNG 而做“修复”,应先确认源节点是否真的具备该特性,PNG 可能是旧版本。不要通过手改 SVG 来消除 extraction:unsupported-* 错误,而应向用户报告缺失的图形。