mcpField
S
svg-art

svg-art

github.com/kv0906创意与媒体18511 次安装2 周前更新
代码仓库

关于 svg-art

通过 Python 脚本生成程序化 SVG 图形的创作技能，适用于需要图案、图表或图标的设计与开发任务。脚本支持将输出写入标准输出或文件，并可串联优化。

主要功能

  1. 01生成网格与放射图案
  2. 02生成分形、波形和粒子图形
  3. 03生成柱状图、折线图与饼图
  4. 04生成常见界面图标
  5. 05支持颜色、线条和随机种子选项
  6. 06优化 SVG 并查看统计信息

适用场景

  1. 01制作可复现的装饰图案
  2. 02生成数据可视化 SVG
  3. 03创建界面图标素材
  4. 04压缩并检查生成的 SVG

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/kv0906/cc-skills --skill svg-art

安装后在 Claude Code 中输入/svg-art确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
svg-fundamentals.md
scripts/
generate_chart.py
generate_fractal.py
generate_grid.py
generate_icon.py
generate_particles.py
generate_radial.py
generate_wave.py
optimize_svg.py

详细介绍

SVG 艺术：程序化生成

使用 Python 脚本生成高质量 SVG 图形。所有脚本都会将有效的 SVG 输出到 stdout（或使用 -o 输出到文件）。

可用脚本

脚本用途主要选项
generate_grid.py网格图案--cols、--rows、--shape、--vary-*
generate_radial.py放射状／螺旋／太阳光芒图案--spiral、--concentric、--sunburst
generate_fractal.py分形（树、科赫、谢尔宾斯基）--tree、--koch、--sierpinski、--depth
generate_wave.py波形和音频可视化--layers、--noise、--bars
generate_particles.py散点／簇状／星座图案--cluster、--gradient、--constellation
generate_chart.py数据可视化--bar、--line、--pie、--donut
generate_icon.py常见 UI 图标--icon NAME、--list、--filled
optimize_svg.py精简／优化 SVG--aggressive、--stats

快速示例

# Grid with size variation
python scripts/generate_grid.py -c 6 -r 6 --vary-size --vary-opacity -o grid.svg

# Spiral pattern
python scripts/generate_radial.py --spiral -n 60 --turns 4 -o spiral.svg

# Fractal tree
python scripts/generate_fractal.py --tree --depth 8 --vary-angle -o tree.svg

# Layered waves with fill
python scripts/generate_wave.py --layers 5 --fill -o waves.svg

# Constellation network
python scripts/generate_particles.py --constellation -n 30 --connect-distance 25 -o network.svg

# Bar chart
python scripts/generate_chart.py --bar --data "30,50,80,45,90" --labels "A,B,C,D,E" -o chart.svg

# Heart icon
python scripts/generate_icon.py --icon heart --filled --stroke "#E11D48" -o heart.svg

# Optimize existing SVG
python scripts/optimize_svg.py input.svg --aggressive -o output.svg

脚本用法示例

网格图案
python scripts/generate_grid.py \
  -c 8 -r 8           # columns and rows
  -s 10 -g 2          # size and gap
  --shape circle      # rect, circle, or diamond
  --vary-size         # random size variation
  --vary-opacity      # random opacity
  --vary-hue          # color variation
  --seed 42           # reproducible randomness
放射状图案
# Concentric rings
python scripts/generate_radial.py --concentric --rings 5 --vary-hue

# Sunburst rays
python scripts/generate_radial.py --sunburst -n 24 --vary-length
分形
# Koch snowflake
python scripts/generate_fractal.py --koch --depth 4 --fill "#3B82F6"

# Sierpinski triangle
python scripts/generate_fractal.py --sierpinski --depth 5
图表
# Line chart with points
python scripts/generate_chart.py --line --data "10,30,20,50" --show-points --smooth

# Donut chart
python scripts/generate_chart.py --donut --data "40,30,20,10" --labels "A,B,C,D"
图标
# List all available icons
python scripts/generate_icon.py --list

# Common icons: check, x, plus, menu, search, home, user, settings,
# mail, heart, star, play, file, download, edit, share, sun, moon, etc.

通用选项（适用于所有脚本）

  • --fill COLOR：填充颜色（默认值：#3B82F6）
  • --stroke COLOR：描边颜色
  • --stroke-width N：描边宽度
  • --seed N：用于确保结果可复现的随机种子
  • -o FILE：输出到文件，而不是 stdout

管道和组合

可以通过管道串联脚本：

# Generate and optimize
python scripts/generate_grid.py -c 10 -r 10 | python scripts/optimize_svg.py --aggressive

# Check optimization stats
python scripts/generate_fractal.py --tree --depth 10 | python scripts/optimize_svg.py --stats

SVG 基础知识参考

请参阅 references/svg-fundamentals.md，了解：

  • SVG 核心结构和 viewBox
  • 元素类型（rect、circle、path 等）
  • 路径命令语法
  • 渐变和图案
  • 无障碍要求

评论

支持 Markdown