svg-creator

用途

SVG Creator Skill 用于创建高质量 SVG 图形，涵盖图标、插画、Logo、图表、信息图、图案、动画与抽象艺术。

强制工作流

每份 SVG 都必须经过反馈循环脚本，没有例外。未渲染并目视验证过的 SVG 不能交付。循环为：WRITE SVG → RENDER → VIEW PNG → ASSESS → FIX → RENDER → VIEW → ... → DELIVER。

具体步骤：

将 SVG 写入工作文件，例如： cat > /home/claude/draft.svg << 'SVGEOF' <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"> ... </svg> SVGEOF
渲染（强制，脚本会跟踪）： python3 /path/to/skill/scripts/svg_loop.py render /home/claude/draft.svg 这会生成 /home/claude/svg_preview.png。
查看渲染出的 PNG（强制，必须实际查看）：对 /home/claude/svg_preview.png 使用 view 工具，认真研究所见内容。
评估结果，自问：元素位置是否正确？是否有间隙、重叠或错位？比例是否合适？颜色与渐变是否生效？对于角色：身体各部分是否自然衔接？
若有问题，修正 SVG 并回到第 2 步。用 str_replace 或重写编辑 /home/claude/draft.svg，再次渲染并查看。
效果满意后交付： python3 /path/to/skill/scripts/svg_loop.py finish /home/claude/draft.svg output-name.svg 这会将 SVG 与预览 PNG 复制到 /mnt/user-data/outputs/。若从未渲染，脚本将拒绝交付。随后使用 present_files 将输出 SVG 分享给用户。

迭代次数指引

简单图标、Logo、图案：通常 1-2 次迭代；图表、信息图：2-3 次；场景、插画：3-5 次；角色、人物、动物：5-8 次（增量构建：先躯干，再逐条添加四肢，每次添加后渲染）。

脚本命令参考

python3 scripts/svg_loop.py render <file.svg> # 渲染 + 查看循环 python3 scripts/svg_loop.py finish <file.svg> [name.svg] # 交付（未渲染则阻止） python3 scripts/svg_loop.py status # 检查迭代次数 python3 scripts/svg_loop.py reset # 重新开始

视觉质量技巧

构建 SVG 时应用以下技巧，适用于所有 SVG 类型。

多停靠点渐变（4+ 停靠点）：两停靠点渐变看起来平淡。使用 4-8 个停靠点并带有色相偏移，例如： <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1" color-interpolation="linearRGB"> <stop offset="0%" stop-color="#0f172a"/> <stop offset="25%" stop-color="#1e3a5f"/> <stop offset="50%" stop-color="#3b82f6"/> <stop offset="75%" stop-color="#93c5fd"/> <stop offset="90%" stop-color="#fde68a"/> <stop offset="100%" stop-color="#f97316"/> </linearGradient> 对于球体：使用 radial 渐变并设 fx="0.3" fy="0.3"（偏移至光源方向）。

五区光照：每个非平凡物体都需要：高光（明亮、温暖）、受光面、中间调（真实颜色）、形体阴影（较冷的色相——蓝/紫，绝不用黑）、反射光（阴影边缘的细微暖光，不透明度 0.10-0.20）。

彩色阴影：阴影使用深蓝（#1a1a4e）、紫色（#2d1b4e）或青色（#0d3b4f），绝不用纯黑或灰色。

投影滤镜： <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="linearRGB"> <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> <feOffset in="blur" dx="3" dy="5" result="offset"/> <feFlood flood-color="#1e1b4b" flood-opacity="0.30" result="color"/> <feComposite in="color" in2="offset" operator="in" result="shadow"/> <feMerge><feMergeNode in="shadow"/><feMergeNode in="SourceGraphic"/></feMerge> </filter>

噪点纹理（打破数字级的完美感）： <filter id="grain" color-interpolation-filters="linearRGB"> <feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="3" stitchTiles="stitch"/> <feColorMatrix type="saturate" values="0"/> <feBlend in="SourceGraphic" mode="soft-light"/> </filter> 在表面和背景上以 5-15% 不透明度应用。

关键默认值：所有 <filter> 元素使用 color-interpolation-filters="linearRGB"；所有渐变元素使用 color-interpolation="linearRGB"；动画元素使用 transform-box: fill-box; transform-origin: center;。

分类别指引

角色、人物、动物：最难的一类。增量构建并积极反馈：画躯干 → 渲染 → 验证；加腿 → 渲染 → 验证衔接；加手臂 → 渲染 → 验证；加头 → 渲染 → 验证；加细节 → 渲染 → 最终检查。四肢使用带 stroke-linecap="round" 的粗 <line>。在每个关节处画 <circle>，且绘制顺序在四肢之后。这样能获得最可靠的衔接外观。对于动画角色：使用带正向运动学的 React/JSX 产物（JS 根据关节角度计算位置——保证关节相连）。

图标（24×24 描边式）：对齐网格，2px 描边，stroke-linecap="round"，stroke-linejoin="round"，fill="none"，stroke="currentColor"。保持在 2-22 坐标范围内。通常一次通过即可。

Logo 与徽章：几何构造，居中。用渐变填充增加深度。最多 2-3 种颜色。在小尺寸下测试可读性（以 64px 宽度渲染）。

场景与风景：从后到前分层：天空 → 远景元素（低饱和、浅色）→ 中景元素 → 前景（鲜艳）。层间添加大气雾霭（半透明蓝白色矩形）。最后叠加暗角。

数据可视化：根据数据计算位置。在条形/扇区上使用渐变填充。细微网格线（#f1f5f9）。处处使用圆头端点。

图案：小型重复平铺。使用 <pattern> 元素并设 patternUnits="userSpaceOnUse"。斜向变体使用 patternTransform="rotate(45)"。

文档结构

进阶参考

阅读 references/advanced-techniques.md 获取完整配方：滤镜链、feTurbulence 指南、feComponentTransfer 调色、材质模拟、构图模板、大气效果、动画（CSS + SMIL）等。

限制

资料未提供该技能的收费、价格、平台支持范围与效果承诺信息。工作流依赖脚本 svg_loop.py 与 /home/claude、/mnt/user-data/outputs/ 等路径环境，具体适用范围资料未进一步说明。

技能介绍