界面设计
界面设计
技能简介
svg-draw 通过纯文本编写 SVG 代码生成矢量图像，并调用系统 rsvg-convert 工具转换为 PNG 格式。
业务背景
让非设计人员也能自主生成矢量图形资产，摆脱对专业设计软件的依赖。通过纯文本编写SVG代码，配合一键转PNG能力，满足头像、标识、简单插画等场景的快速产出需求，降低视觉内容制作门槛。
落地案例：运营团队为内部聊天机器人定制专属形象。选择assets目录下的龙模板，修改配色和细节特征后输出SVG代码，调用转换脚本生成400×400像素的PNG头像，直接用于各平台账号配置。整个过程无需安装Photoshop或Illustrator，在服务器环境即可完成。
能做什么
- 从零编写 SVG 代码创建原创图形
- 基于现有模板（龙、龙虾等）修改生成个性化图像
- 将 SVG 文件批量转换为 PNG 位图
- 制作社交媒体头像、聊天机器人形象、简单 Logo
使用说明
安装准备
本技能依赖系统已安装的 rsvg-convert 工具，请确保运行环境包含该组件。技能文件位于 /root/.openclaw/workspace/skills/svg-draw/。
新建绘图
- 选择模板：查看
assets/目录下的 dragon_template.svg 或 lobster_template.svg - 编写 SVG：直接输出文本内容到 .svg 文件，必须包含 xmlns 命名空间和 viewBox 属性
- 添加背景：插入 <rect> 元素避免透明背景问题
- 执行转换：调用脚本生成 PNG
转换命令
/root/.openclaw/workspace/skills/svg-draw/scripts/svg_to_png.sh input.svg output.png [宽] [高]默认输出尺寸为 400×400 像素，可自定义宽高参数。
输入与输出
见下方输入与输出表格。
| 项目 | 内容 |
|---|---|
| 输入 | SVG 代码字符串或 .svg 文件路径；可选宽/高参数（默认 400×400） |
| 输出 | PNG 格式位图文件，保留透明度通道 |
| 适用人群 | 熟悉基础 SVG 语法的开发人员；需要批量生成简单图形的技术运营 |
| 不包含 | WYSIWYG 编辑器、动画支持、PDF/EPS 等其他矢量格式导出 |
风险提示
- rsvg-convert 未安装时转换步骤会失败
- 缺少 xmlns 属性的 SVG 可能在部分渲染器显示异常
- 复杂路径代码量过大时建议拆分图层
- 透明背景若未处理可能在深色界面不可见
来源信息
原始链接：https://github.com/openclaw/skills/tree/main/skills/lijy2015/svg-draw/SKILL.md
来源类型：GitHub 仓库
常见问题
Q1：SVG绘图转换 适合哪些场景？
A：适合需要「svg-draw 通过纯文本编写 SVG 代码生成矢量图像，并调用系统 」的场景，尤其是希望快速验证并落地的团队与个人。
Q2：第一次使用应该先做什么？
A：先明确目标任务，再按照页面中的“能做什么”和“使用说明”完成最小可行流程。
Q3：如何判断是否值得长期使用？
A：建议连续使用 1-2 周，对比效率、稳定性和协作成本，再决定是否纳入长期工具栈。
替代方案
相关推荐
数据统计
相关导航
暂无评论...