---
name: svg-article-illustrator-3fb094bf41d0
homepage: https://github.com/cat-xierluo/legal-skills
author: 杨卫薪律师（微信ywxlaw）
version: "1.2.0"
license: MIT
description: 根据文章内容创作动态 SVG 文章配图，以构图、图形关系和状态变化解释内容；默认输出3–5秒原生SMIL动画，静态图仅作为明确例外。支持时间轴编译、布局检查与PNG导出；不用于完整视频制作或自动发布。
---
# SVG Article Illustrator

读取全文与调用项目的视觉、画幅、嵌入、归档约定，再做配图。先定阅读任务，再定视觉形态；从参考作品提炼表达方法，示例仅说明方法或技术用法。文章 SVG 插图默认动态：每张图至少安排一组解释对象关系或状态变化的原生 SMIL 动画，动画是交付口径，不是可选加分项。

常规循环时长目标为 **3–5 秒**，其中 3 秒左右优先用于单一、清楚的状态变化，5 秒是文章插图上限。内容更多时先拆图、删掉无信息动作或提高关键状态密度；不得靠延长周期换取完整。任何 3–5 秒方案都要保留关键结果的可读停留，不能让形成、拆分、替换或接续变成一闪而过。

静态只用于调用方明确要求静态、目标平台拒绝动画，或动画确实无解释增益的总结图。选择静态必须在配图计划和交付说明中逐图写明理由；不得因为关系图、分类图或制作方便而静默降级为静态。

最终交付前用 `validate` 或 `publish` 验收，命令默认拒绝没有原生 SMIL、全部轨道恒定或所有变化轨道均可确定永久隐藏的 SVG。只有已记录逐图理由的静态例外才可显式加 `--allow-static`；不得为通过门禁改写例外理由。Markdown 内联交付也要先把每段 SVG 单独通过该门禁。

## 工作方法

1. **内容 → 配图计划**：为每张图记录对应段落、读者需要理解的关系/变化、图的作用、插入点、输出模式。按信息增益决定数量，不按标题数或固定张数配图。
2. **计划 → 视觉表达**：用一句话说清读者将看到哪些对象、它们有什么关系或变化，再选择画面形态。在计划中说明哪些关系需要突出、比较或同时保留，以及图形与变化怎样帮助理解；同时记录必须保留的事实与对象辨识细节，见[阅读编排](references/reading-sequence.md)和[视觉设计](references/visual-design.md)。创意从本次内容出发，不按示例外观或固定类型映射套版。已有插图先按上述方法审旧基线：旧图已讲清内容时沿用，不用“换成动画”或“重新设计”替代比较。沿用表示不重画，不绕过交付门禁；动态旧图按原样验证，静态旧图仍按逐图静态例外记录并显式放行。
3. **对象/状态 → 时间轴**：列出对象、标签、容器、坐标系、初末状态和互斥关系。让运动说明对象如何变化、为何变化；在 3–5 秒内组织需要的变化与可读停留，结合关键状态和过渡共同安排空间与节奏。过程复杂就拆图或压缩无关动作。确认为静态例外时，仍记录该图缺少动效的解释理由。
4. **骨架 + 时间轴 → SVG**：使用唯一 `data-cue` 定位实际图形；通过 [时间轴工具](references/timeline-tools.md) 编译，不手算大量 keyTimes。静态例外直接输出可读 SVG。变换坐标合同和修正示例见 [动态规范](references/dynamic-svg.md)。
5. **SVG → 实测与整图审阅**：运行结构校验；打开自包含 HTML，在桌面与 375 CSS px 宽度测量真实文字与对象，检查截图。覆盖初态、停留、运动中段、循环末与下一轮；实际播放两个完整周期。按[阅读编排](references/reading-sequence.md)审内容理解、观看顺序、最终布局和文字疏密；返修后回查此前反馈是否仍落实，记录具体画面与所见。动画存在、字数减少或无碰撞均不能单独代替这一层；还要说明运动是否让对象关系、结构、数量或因果比基线更容易理解，不能只比较质感或节奏。多图先审有代表性的一张，再扩展。测量方法及边界见 [布局验收](references/layout-verification.md)。
6. **实测 → 交付**：按调用项目要求内联 SVG、保存文件或插入 PNG；回读实际交付内容，确认动画、ID 引用和文本仍完整。通过 publish 剥离制作标记，保留原生 SMIL；预览 HTML 的 JS 不进入发布 SVG。本地 HTML 片段交接见工具参考。提供源骨架、时间轴和验证记录以便修改。

## 按需加载

| 任务 | 参考 |
|---|---|
| 选画幅、安排文字与对象 | [共享原则](references/core-principles.md) |
| 提升设计感、选择构图与图形语言、避免套模板 | [视觉设计](references/visual-design.md) |
| 设计读者观看顺序、动作接续及新旧版本对照 | [阅读编排](references/reading-sequence.md) |
| 操作演示、机制或状态变化 | [动态 SVG](references/dynamic-svg.md) |
| 编译 JSON、校验与预览 CLI | [时间轴工具](references/timeline-tools.md) |
| DOM 测量、长文本、重叠反馈 | [布局验收](references/layout-verification.md) |
| 明确静态例外与静态后备 | [静态 SVG](references/static-svg.md) |
| 已选表达确实涉及界面操作或控件状态 | [UI 与微交互](references/ui-interaction.md) |
| 输出 PNG | [PNG 导出](references/png-export.md) |
| 多图有界委派 | [并行协作](references/multi-agent-generation.md) |
| 维护与回归、独立复验 | [验证设计](references/verification.md) |
| 借鉴来源与评估边界 | [来源记录](references/provenance.md) |

## 工具入口

以下以材料归拢样例演示命令，在 Skill 目录运行，输出路径可指定；已有文件默认拒绝覆盖，确认替换时加 `--force`。Python 工具仅使用标准库，不安装第三方套件。

```bash
python3 scripts/svg_motion.py compile assets/materials-demo.skeleton.svg assets/materials-demo.timeline.json -o /tmp/materials-demo.svg
python3 scripts/svg_motion.py validate /tmp/materials-demo.svg
python3 scripts/svg_motion.py preview /tmp/materials-demo.svg -o /tmp/materials-demo.html
python3 scripts/svg_motion.py publish /tmp/materials-demo.svg -o /tmp/materials-demo.publish.svg
# 仅用于已在计划和交付说明中写明理由的静态例外：
python3 scripts/svg_motion.py validate /tmp/static-exception.svg --allow-static
```

在浏览器打开生成的 HTML；播放、暂停、重置、逐秒步进与时间滑杆只服务于制作预览。其测量函数 `window.measureSvgLayout(svg)` 也可由浏览器自动化调用。此处只演示工具的输入输出，实际创作自行选择画面形态、风格、尺寸与节奏。

PNG 路径保留 `node scripts/svg2png.js input.svg [output.png] [dpi]`，需要既有 Node.js、Puppeteer和浏览器；缺少时按环境约定准备项目本地依赖，不自动做全局安装。

## 交付边界

- XML/时序检查通过仅代表本工具支持的保守 SVG 子集通过；未知语法会拒绝，检查边界见工具参考。
- 动态交付必须回读每段 SVG 中的 `animate` / `animateTransform`；`validate` / `publish` 默认拒绝无动画文件。发现仅有装饰性浮动时，先修订时间轴，不得将其称为解释性动态配图。
- 布局测量基于实际 DOM，可发现边界问题与碰撞候选；不能仅凭字符估宽、一个时点或文字边界交集断言画面正确。容器、互斥状态与有意遮挡都保留可观察证据。
- 浏览器成功不证明公众号编辑器、保存后预览或手机 WebView 成功。逐环境记录实测时间、入口与结果；未测项写 `NOT_VERIFIED`。静态 SVG 与 PNG 也要核对实际字体、裁切和发布入口。
- 默认交回计划、源码和本地验证结果；内容发布、外部上传和安装不包含在本 Skill 的默认动作内。


---
Source attribution: 杨卫薪律师（微信ywxlaw）
Original project: https://github.com/cat-xierluo/legal-skills/blob/f5dafa46cd0c4b5bb2aee8ac40f38400cb6077c7/skills/svg-article-illustrator/SKILL.md
License: MIT
License information: https://opensource.org/license/mit
Original upstream instructions; downloaded from Mega AI Hub.

## Upstream license notice

MIT License

Copyright (c) 2025 杨卫薪律师（微信ywxlaw）

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.



# Mega AI Hub resource metadata

Creator / publisher: 杨卫薪律师（微信ywxlaw）
Original project: https://github.com/cat-xierluo/legal-skills/blob/f5dafa46cd0c4b5bb2aee8ac40f38400cb6077c7/skills/svg-article-illustrator/SKILL.md
Attribution basis: Source repository record

Fields of work: Marketing, Design
Roles: Content Marketer, Graphic Designer, UX Designer
Specialties: Frontend, Git, Backend
Tools: Puppeteer
Country applicability: Country not specified
Classification basis: Source category, role and specialization labels
Instruction SHA-256: a66e6c0997b723ed9016a93ca5e742731e0a6778495cbea3c6c2c059888ffa93