前言¶
在 Agent 里接「画张配图」「做张 16:9 封面」「导出 PNG」这类需求时，常见两条路：调用多模态生图 API，或让模型直接写 HTML/CSS。前者对海报、信息图里的数字和文案容易出错；后者能出页面，但指定宽高比、高清位图、GIF/MP4 动图时往往还要自己拼渲染链。
下面介绍 SkillHub 社区 Skill SVG Studio（页面名「SVG绘图工作台-智能生图」，坐标 @user_dfcfbf47/svg-studio）。它的思路是：让模型编写 SVG 源码表达图形，默认交付可编辑的 .svg；用户点名时再走脚本导出 PNG 或动图，从而在不依赖多模态生图的前提下覆盖配图、图表、海报等场景。
这是什么¶
SVG Studio 是社区来源（community）、分类为 design-media 的 Agent Skill，当前版本 1.3.0，发布者为 user_dfcfbf47。SkillHub 标签标明 不需要 API Key（requires_api_key=false）。
一句话定位：用「写 SVG」代替「调生图模型」，产出任意宽高比、任意复杂度的矢量图，并可导出 SVG / PNG / GIF / APNG / WebP / MP4，或内嵌 HTML。
官方入口：
- API 页：https://api.skillhub.cn/user_dfcfbf47/svg-studio
- SkillHub 页：https://www.skillhub.cn/skills/user_dfcfbf47/svg-studio
核心功能¶
以下能力与官方简介及 Skill 包内 SKILL.md 一致，可分四块理解：
-
按指令编写复杂 SVG
覆盖图表、插画、流程图、架构图、海报、信息图、图标、封面、OG 图等。Skill 内附带references/svg-techniques.md（版式与塌方点）、references/handdrawn-infographic.md（手账/产品风配方）、references/animation.md（动画路线）。 -
SVG → PNG 高清渲染
scripts/render.py：Chrome headless 优先（渐变、滤镜、中文字体保真），无浏览器时自动降级 resvg → cairosvg。支持--scale（DPR，默认 2）、--width/--height、--bg（透明或实色）。 -
多帧 / 模板 SVG → 动图
scripts/animate.py：模板模式（SVG 内__T__占位符表示 0→1 进度）或帧目录模式，合成 GIF / APNG / WebP / MP4（MP4 依赖本机 ffmpeg）。 -
任意宽高比与 DPR
通过viewBox定比例（如 16:9、1:1、9:16、OG 1200×630 等），像素清晰度由渲染时的--scale或--width控制。
交付约定（Skill 内明确）：默认只交付 .svg；用户未要求位图时不要主动转 PNG。需要动图文件时再导出对应格式。
安装与启用¶
SkillHub 页面给出的安装方式是：让 Agent 按 SkillHub 安装说明 安装 @user_dfcfbf47/svg-studio。
若本机已有 skillhub CLI，可将 Skill 装到当前 Agent 的 skills 目录（必须使用 --dir，否则默认落在 ./skills/ 且可能不被识别）：
command -v skillhub && skillhub --version
未安装 CLI 时，可按官方文档执行完整安装（示例为文档中的推荐命令）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
安装本 Skill（将 <skills 目录> 换成你环境对应路径）：
skillhub install svg-studio --namespace user_dfcfbf47 --dir <skills 目录>
常见 Agent 的 skills 目录（摘自 SkillHub 安装文档）：
| 环境 | 路径 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或项目下 .agents/skills/ |
| workbuddy | ~/.workbuddy/skills/ |
安装完成后，在对话中描述画图需求即可触发 Skill；具体是否自动加载取决于各客户端的 Skill 发现规则。
典型用法¶
工作流在 SKILL.md 中写为：选宽高比 → 编写 SVG 并保存 →（可选）渲染 PNG →（可选）合成动图 → 自检 → 交付。
1. 定 viewBox 并写 SVG¶
常用比例示例（Skill 文档）：方图 0 0 1000 1000、16:9 0 0 1280 720、9:16 0 0 720 1280、OG 0 0 1200 630。起手建议带 xmlns 与系统字体族；非透明场景先画满背景 rect，避免位图导出时背景发透。
2. 用户要求 PNG 时再渲染¶
在 Skill 目录下执行（路径以你安装位置为准；SKILL.md 中 workbuddy 示例使用其 managed Python，其他环境可用 python3）：
python3 scripts/render.py poster.svg
python3 scripts/render.py poster.svg -o poster.png --scale 2 --bg "#0f172a"
python3 scripts/render.py chart.svg --width 1600
python3 scripts/render.py chart.svg --html chart.html
3. 需要动图文件时¶
网页内播放可只做带动画的 SVG（SMIL 或 CSS @keyframes），无需转码。要独立动图文件时用 animate.py：
# 模板模式：anim.svg 内含 __T__ 占位符
python3 scripts/animate.py --template anim.svg --frames 30 -o out.gif --fps 15 --bg "#0f172a"
# 帧目录：frame-000.svg ...
python3 scripts/animate.py --frames-dir ./frames -o out.webp --fps 24 --loop 0
输出扩展名决定格式：.gif、.webp、.apng/.png、.mp4。
4. 自检¶
用户要位图时可用 file out.png 确认尺寸，并用客户端 Read 工具打开图片检查文字截断、背景与动效。仅交付 SVG 时，Skill 建议渲染临时 PNG 肉眼检查后删除，不把临时文件当作交付物。
适用场景与注意¶
适合：
- 用户说「生成一张图 / 画个图 / 做配图 / 海报 / 信息图 / 图表 / 流程图 / 架构图 / 图标 / 封面 / OG 图」，并指定 16:9、1:1、9:16 等比例或要求 PNG。
- 要做 GIF、loading 动效、短循环演示，且能接受矢量风格。
- 模型没有多模态生图，或要求文案、数字与源码一致（SVG 为纯文本，可逐字核对）。
限制与坑（来自 Skill 文档，使用前建议知晓）：
- 照片级写实、真实人物风景不适合 SVG；这类需求应走多模态生图。
- 手绘/重滤镜（如
feTurbulence+feDisplacementMap）在 resvg 路线可能失真，文档要求此类图必须用 Chrome 渲染。 - 无 Chrome 时走 resvg/cairosvg；cairosvg 依赖系统 libcairo，未安装时会再降级。
- 脚本首次运行会在 Skill 目录下创建隔离
.venv/并安装 Pillow、cairosvg 等，勿将.venv打包分发。 - SkillHub 页显示评分 100000、下载 2282（统计以平台为准）。
结尾¶
SVG Studio 把「生图」拆成模型可控的 SVG 编写 与可选的 render.py / animate.py 导出，让文本模型在配图、图表、动图场景里有一条不依赖扩散生图的路径。需要安装或更新时，以上述 SkillHub 官方地址与 @user_dfcfbf47/svg-studio 为准。
