SVG绘图

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

快速开始

对于新绘图：

1. 直接将SVG代码写入文件（可使用assets/中的模板作为起点）
2. 使用转换脚本转换为PNG格式
3. 通过适当渠道发送（钉钉、Telegram等）

对于现有SVG文件：

1. 使用转换脚本将SVG转换为PNG
2. 分享生成的图像

创建SVG图像

基本工作流程

1. 选择或创建模板

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

2. 编写SVG文件

   # Example: Write SVG to file
   write('/path/to/output.svg', svg_content)
   

3. 转换为PNG格式

   /root/.openclaw/workspace/skills/svg-draw/scripts/svg_to_png.sh input.svg output.png 400 400
   

SVG结构提示

始终包含：

• <svg>标签，并带有xmlns="http://www.w3.org/2000/svg"和viewBox
• 背景<rect>（防止背景透明）
• 适当的宽度和高度属性

常见的SVG元素：

• 形状：<rect>、<circle>、<ellipse>、<polygon>、<path>
• 文本：<text>使用文本锚点="居中"用于居中
• 颜色：使用十六进制代码或命名颜色
• 不透明度：添加不透明度属性以实现透明效果

示例字符结构：

Background → Body → Head → Face features → Limbs → Accessories → Name

将SVG转换为PNG

使用捆绑的转换脚本：

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

参数：

• 输入.svg：源SVG文件路径
• 输出.png：目标PNG文件路径
• 宽度：输出宽度（像素，默认：400）
• 高度：输出高度（像素，默认：400）

示例：

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

可用模板

龙模板 (assets/dragon_template.svg)

蓝龙具有：

• 蛇形身躯与双翼
• 带有高光的金色眼睛
• 龙角与尖耳
• 弯曲的尾巴
• 魔法闪光效果
• 名称标签："大龙 🐉"

定制建议：

• 更改填充色="#4a90d9"以变换身体颜色
• 通过修改填充色="#ffcc00"
• 调整眼睛颜色
• 添加/移除特征（鳞片、火焰等）

改变背景颜色龙虾模板 (资源文件/龙虾模板.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">Your Text</text>

资源

脚本/

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

素材/

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

故障排除

SVG 未渲染：

• 检查是否有正确的<svg>标签并包含xmlns属性
• 确保viewBox设置正确
• 验证所有标签都已闭合

转换失败：

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

图像显示异常：

• 先在浏览器中测试SVG
• 检查坐标系（viewBox与width/height）
• 验证元素堆叠顺序（后绘制的元素显示在上层）