关于 svg-skill
svg-skill 是一项指导直接编写 SVG 源码的技能，适用于需要矢量图形、图标、图表或界面组件的开发与设计工作。它按图形场景提供绘制、无障碍、验证和交付规范，并明确不使用图像生成工具。
主要功能
- 01覆盖图标、徽标、插图、图表和流程图等场景
- 02提供 SVG 结构与绘制规则
- 03包含无障碍标注和文件质量检查
- 04支持独立 SVG、React、Vue 和 CSS 等交付形式
- 05使用脚本批量验证 SVG 文件
适用场景
- 01制作界面图标、徽标或应用图标
- 02绘制流程图、架构图或数据图表
- 03将 SVG 图形作为 React 或 Vue 组件交付
- 04为网页或邮件准备内联 SVG 图形
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/svg-skill确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
CONTRIBUTING.md.gitignorereference.mdscenarios.mdexamples.mdLICENSEREADME.mdinstall.shscripts/validate.shtest-output/TEST.mdpreview.htmlrun-tests.shtest-output/12-integration/BellIcon.tsxMailIcon.vuedemo.css详细介绍
svg-skill
直接编写 SVG 源码。不要使用图像生成工具。
场景索引
匹配用户意图，然后选择合适的路径。详情见 scenarios.md，示例见 examples.md。
| 场景 | viewBox | 关键技巧 | 交付物 |
|---|---|---|---|
| UI 图标（描边／填充） | 0 0 24 24 | currentColor、统一的 stroke-width | 文件／React 组件 |
| 多色图标 | 0 0 24 24 | 独立路径 + 固定填充色 | 文件 |
| Logo／品牌标志 | 品牌专属 | 路径轮廓、安全边距 | SVG + 可选 favicon |
| Favicon／应用图标 | 0 0 32 32 | 简洁、高对比度 | 文件 |
| 插画／空状态 | 0 0 100 100+ | 扁平形状 | SVG／内联 |
| 流程图／架构图 | 基于内容 | 标记箭头、网格对齐 | UTF-8 文件 |
| 图表（柱状图／折线图／饼图） | 基于数据 | 根据比例计算坐标 | title + desc |
| 进度环／进度条 | 0 0 24 24 或 bar | stroke-dasharray 或矩形宽度 | 可动画 |
| 头像占位图 | 0 0 40 40 | 圆形 + 字母／人物路径 | currentColor |
| 徽章／标签 | 基于文本 | 圆角矩形 + 文本 | 品牌色 |
| 波浪分隔线 | 0 0 1200 120 | 贝塞尔路径、preserveAspectRatio="none" | 全宽 |
| 地图图钉 | 0 0 24 24 | 水滴形路径 + 中心圆点 | 主题色或固定颜色 |
| Sprite 图集 | 每个符号单独设置 | <symbol> + <use href="#id"> | 单个 sprite.svg |
| CSS 背景／遮罩 | 与图标相同 | 外部文件或 data URI | CSS 代码片段 |
| 加载动画 | 0 0 24 24 | CSS @keyframes 或 stroke-dash | 内联 SVG |
| 悬停交互 | 任意 | 通过 CSS :hover 修改填充／描边／变换 | 内联 + 样式 |
| 裁剪形状 | 基于容器 | <clipPath>／<mask> | defs 引用 |
| 阴影／模糊 | 任意 | <filter> feDropShadow／feGaussianBlur | defs 引用 |
| 图案纹理 | 小单元 | <pattern> 平铺 | defs 引用 |
| React／Vue 组件 | 0 0 24 24 | 展开 props、使用 camelCase 属性 | .tsx／.vue |
| 邮件内联 | 简洁 | 不使用样式／动画／外部引用 | 紧凑代码片段 |
不适合 SVG 的场景：照片级真实感、复杂位图纹理、细节过多的插画 → 说明限制，建议使用栅格图或简化风格。
工作流
- [ ] 1. Pick scenario and deliverable from index
- [ ] 2. Set viewBox, style, colors (currentColor vs brand)
- [ ] 3. Draw: compose shapes → paths; shared assets in <defs>
- [ ] 4. A11y: decorative aria-hidden / informative title+desc
- [ ] 5. Minimize; non-ASCII text → UTF-8 + XML declaration
- [ ] 6. Write file; run validate.sh
骨架模板
仅图标（无文本）：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true">
</svg>
非 ASCII 文本（中文、日文等）：
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120" role="img" aria-labelledby="title">
<title id="title">Diagram title</title>
</svg>
全宽装饰（波浪等）：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none" aria-hidden="true">
</svg>
绘制规则
- viewBox 定义逻辑坐标；通过 CSS
width／height设置显示尺寸 - 单色 UI 资源默认使用
currentColor - 描边图标——
stroke-width="2"stroke-linecap="round"stroke-linejoin="round" - 共享 defs——在
<defs>中定义渐变、箭头、图案、滤镜；使用简短且唯一的id - 图表——先计算边距和比例；在 title／desc 中概述数据
- 动画——优先使用 CSS；仅在简单场景中使用 SMIL
- 默认使用扁平风格——仅在需要时使用渐变／阴影
质量检查清单
-
xmlns+viewBox - 非 ASCII 文本 → UTF-8 + XML 声明
- 无占位路径或编辑器元数据
- 文件中的
id唯一（尤其是 Sprite） - 图表包含 title；装饰性图标使用 aria-hidden
- 文件可独立打开和预览
bash scripts/validate.sh path/to/dir/
xmllint --noout file.svg # required for non-ASCII text
交付物
| 形式 | 方式 |
|---|---|
独立 .svg | 写入 assets/ 等目录 |
| Sprite | 在一个文件中放置多个 <symbol>；说明 <use> 的用法 |
| React | export function XIcon(props: SVGProps<SVGSVGElement>) + 展开 props |
| Vue | <template><svg ...></svg></template> |
| CSS 背景 | background: url(...) 或内联 data URI |
| CSS 遮罩 | -webkit-mask: url(...)；形状需要实心填充区域 |
| 内联 HTML | 原始 <svg> 片段，不加包装 div（除非另有要求） |
禁止事项
- 使用
<image>将位图伪装成矢量图（除非明确要求） - 对简单的矢量图形使用图像生成
- 留下空路径／TODO 占位符
- 非 ASCII 文本缺少 UTF-8 声明
- 为邮件场景添加复杂动画或外部依赖
工具与文档
| 资源 | 说明 |
|---|---|
| scenarios.md | 按场景分步说明 |
| reference.md | 路径语法、定义、框架 |
| examples.md | 完整代码示例 |
| scripts/validate.sh | 批量验证 |
评论
支持 Markdown