名称： svg-draw
描述： 无需外部图形库，创建 SVG 图像并转换为 PNG 格式。适用于需要生成自定义插图、头像或艺术作品（例如“画一条龙”、“创建头像”、“制作徽标”）或将 SVG 文件转换为 PNG 格式的场景。此技能通过直接编写 SVG 文本（无需 PIL/ImageMagick）实现，并使用系统 rsvg-convert 工具进行 PNG 转换。

SVG 绘图

使用纯 SVG 代码和系统转换工具生成矢量图形和栅格图像。

快速开始

对于新绘图：
1. 直接将 SVG 代码写入文件（可使用 assets/ 目录下的模板作为起点）
2. 使用转换脚本将其转换为 PNG
3. 通过适当的渠道（钉钉、Telegram 等）发送

对于现有 SVG 文件：
1. 使用转换脚本将 SVG 转换为 PNG
2. 分享生成的图像

创建 SVG 图像

基本流程

1. 选择或创建模板

   • 查看 assets/ 目录中的现有模板（龙、龙虾等）
   • 或从头开始编写 SVG

2. 编写 SVG 文件
   bash # 示例：将 SVG 内容写入文件 write('/path/to/output.svg', svg_content)

3. 转换为 PNG
   bash /root/.openclaw/workspace/skills/svg-draw/scripts/svg_to_png.sh input.svg output.png 400 400

SVG 结构要点

始终包含：
* 带有 xmlns="http://www.w3.org/2000/svg" 和 viewBox 属性的 <svg> 标签
* 背景 <rect>（防止透明背景）
* 适当的 width 和 height 属性

常用 SVG 元素：
* 形状：<rect>, <circle>, <ellipse>, <polygon>, <path>
* 文本：使用 text-anchor="middle" 的 <text> 标签以居中显示
* 颜色：使用十六进制代码或命名颜色
* 透明度：添加 opacity 属性实现透明效果

示例角色结构：

背景 → 身体 → 头部 → 面部特征 → 四肢 → 配饰 → 名称

将 SVG 转换为 PNG

使用附带的转换脚本：

/root/.openclaw/workspace/skills/svg-draw/scripts/svg_to_png.sh <input.svg> <output.png> [width] [height]

参数：
* input.svg：源 SVG 文件路径
* output.png：目标 PNG 文件路径
* width：输出宽度（像素，默认：400）
* height：输出高度（像素，默认：400）

示例：

/root/.openclaw/workspace/skills/svg-draw/scripts/svg_to_png.sh dragon.svg dragon.png 512 512

可用模板

龙模板 (assets/dragon_template.svg)

蓝色龙，包含：
* 带翅膀的蛇形身体
* 带有高光的金色眼睛
* 角和尖耳朵
* 弯曲的尾巴
* 魔法闪光效果
* 名称标签："大龙 🐉"

自定义思路：
* 修改 fill="#4a90d9" 以改变身体颜色
* 调整 fill="#ffcc00" 以改变眼睛颜色
* 添加/移除特征（鳞片、火焰等）
* 更改背景颜色

龙虾模板 (assets/lobster_template.svg)

红色龙虾，包含：
* 橙红色的分段外壳
* 大钳子（左和右）
* 八条行走腿
* 柄眼
* 长触角
* 尾扇
* 海洋气泡背景
* 名称标签："大龙虾 🦞"

自定义思路：
* 调整外壳颜色：fill="#e85d04"（深红色）或 fill="#f48c06"（橙色）
* 更改钳子大小或位置
* 添加更多气泡
* 修改背景

设计指南

配色方案

友好/可爱风格：
* 身体：#4a90d9（蓝色），#f48c06（橙色）
* 点缀：#ffcc00（黄色），#ff6b6b（珊瑚色）
* 背景：#1a1a2e（深蓝色）

专业风格：
* 使用柔和的色调
* 坚持使用 2-3 种主色
* 如有需要，可添加微妙的渐变

角色设计原则

1. 保持简洁 — 过多细节在小尺寸下会显得杂乱
2. 使用对比 — 深色背景上的浅色特征
3. 增添个性 — 眼睛、表情、小细节
4. 包含标签 — 在底部添加名称/标题以提供上下文
5. 按目标尺寸测试 — 在 400x400 像素下查看以确保可读性

常见任务

创建头像

1. 从符合氛围的模板开始（龙、龙虾等）
2. 修改颜色和特征
3. 添加个人特色（配饰、表情）
4. 在底部添加名称标签
5. 转换并发送

制作徽标

1. 使用简单的几何形状
2. 限制在 2-3 种颜色
3. 考虑可扩展性设计
4. 在多种尺寸下测试
5. 以更高分辨率导出（800x800 或 1024x1024）

自定义模板

更改颜色： 找到 fill="#" 或 stroke="#" 属性并替换其十六进制代码

调整元素大小： 调整 rx, ry（椭圆）或 width, height（矩形）

重新定位： 修改 cx, cy（圆形/椭圆）或 x, y（矩形）

添加文本：

<text x="200" y="370" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#ffcc00" text-anchor="middle">你的文本</text>

资源

scripts/

• svg_to_png.sh - 使用 rsvg-convert 将 SVG 转换为 PNG

assets/

• dragon_template.svg - 友好的蓝色龙
• lobster_template.svg - 可爱的红色龙虾

故障排除

SVG 未渲染：
* 检查 <svg> 标签是否包含正确的 xmlns 属性
* 确保 viewBox 设置正确
* 验证所有标签都已闭合

转换失败：
* 确认已安装 rsvg-convert：which rsvg-convert
* 检查文件路径是否正确
* 验证 SVG 语法是否有效

图像显示异常：
* 先在浏览器中测试 SVG
* 检查坐标系（viewBox 与 width/height）
* 验证元素堆叠顺序（后绘制的元素显示在顶部）