Back to Details

_svg-drawing

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

SVG Drawing Skill

SVG 绘制技能

Iterative workflow for creating vector artwork with visual feedback.
提供带可视化反馈的矢量艺术作品创作迭代工作流。

The Challenge

难点

Creating SVG artwork by writing code is challenging without visual feedback during the design process. Writing coordinates and shapes blindly often requires guessing and hoping.
设计过程中没有可视化反馈的前提下，靠编写代码创建SVG艺术作品难度很高。盲目编写坐标和形状往往需要反复猜测、试错。

The Solution: render-svg Tool

解决方案：render-svg 工具

Location: 
~/claude-autonomy-platform/utils/render-svg
Converts SVG code to viewable PNG images for iterative design.
Usage:
bash
render-svg <svg-file> [output-file]
Examples:
bash
undefined
存储路径: 
~/claude-autonomy-platform/utils/render-svg
可将SVG代码转换为可预览的PNG图像，支撑迭代设计。
使用方法:
bash
render-svg <svg-file> [output-file]
示例:
bash
undefined

Render to default filename

Render to default filename

render-svg hedgehog.svg
render-svg hedgehog.svg

Specify custom output

Specify custom output

render-svg logo.svg ~/creative/logo-preview.png
undefined
render-svg logo.svg ~/creative/logo-preview.png
undefined

Iterative Design Workflow

迭代设计工作流

Start Simple

从简单开始

bash
undefined
bash
undefined

1. Create initial SVG with basic shapes

1. 用基础形状创建初始SVG

2. Render immediately

2. 立即执行渲染

render-svg design.svg
render-svg design.svg

3. View with Read tool

3. 用读取工具查看渲染结果

4. Identify what needs adjustment

4. 确定需要调整的内容

undefined
undefined

Refinement Loop

优化循环

bash
undefined
bash
undefined

1. Edit SVG (adjust coordinates, colors, proportions)

1. 编辑SVG（调整坐标、颜色、比例）

2. Render again

2. 再次执行渲染

render-svg design.svg
render-svg design.svg

3. Compare with mental model

3. 和预期效果对比

4. Repeat until satisfied

4. 重复操作直到达到满意效果

undefined
undefined

Version Comparison

版本对比

bash
undefined
bash
undefined

Save iterations to track progress

保存多个迭代版本追踪进度

render-svg design.svg design-v1.png
render-svg design.svg design-v1.png

Make changes

做出修改后

render-svg design.svg design-v2.png
render-svg design.svg design-v2.png

Compare side by side

并排对比效果

undefined
undefined

Design Tips

设计提示

Build Progressively:
  • Start with basic shapes (circles, rectangles, ellipses)
  • Render after each major addition
  • Add complexity gradually
Coordinate Reference:
  • SVG viewBox defines canvas (e.g., "0 0 400 300")
  • Origin (0,0) is top-left
  • X increases right, Y increases down
Layer Workflow:
  • Background elements first
  • Build up layers progressively
  • Render frequently to verify positioning
逐步构建:
  • 从基础形状开始（圆形、矩形、椭圆）
  • 每次添加主要内容后都执行渲染
  • 逐步增加复杂度
坐标参考:
  • SVG的viewBox属性定义画布（例如 "0 0 400 300"）
  • 原点(0,0)位于左上角
  • X轴向右递增，Y轴向下递增
分层工作流:
  • 先绘制背景元素
  • 逐步向上叠加图层
  • 频繁渲染确认元素位置是否正确

Benefits

优势

  • Visual Feedback: See what code creates
  • Faster Iteration: Spot issues immediately
  • Confidence: Verify appearance before sharing
  • Learning: Understand coordinate-to-visual mapping
  • Experimentation: Try ideas with immediate results
Built by Sparkle Orange & Amy, November 2025 Simple tool, iterate based on real use 🎨✨
  • 可视化反馈: 直观看到代码生成的效果
  • 更快迭代: 立刻发现问题
  • 更高确定性: 分享前即可确认最终呈现效果
  • 便于学习: 理解坐标到视觉效果的映射关系
  • 方便试验: 尝试新想法可立刻得到结果
由Sparkle Orange & Amy于2025年11月构建 简单工具，基于实际使用场景迭代 🎨✨