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-svg hedgehog.svg
render-svg hedgehog.svg

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. 使用Read工具查看

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月 简单实用的工具，可根据实际使用需求迭代优化 🎨✨