--- name: text-to-svg description: Generate logos, icons, illustrations and other vector graphics from natural language descriptions. Supports style directives (flat monochrome/gradient/stroke/rounded/minimal/tech). For design mockups, brand logos, UI icons, info illustrations. --- # Text-to-SVG — Natural Language to SVG Vector Graphic Code Convert natural language descriptions into runnable SVG vector graphic code. ## Workflow 1. **Parse requirements** — Identify objects, style, colors, dimensions from description 2. **Determine structure** — Choose appropriate SVG element composition (paths/shapes/text/gradients) 3. **Generate code** — Output complete code ready for embedding or saving as `.svg` 4. **Validate output** — Ensure correct SVG syntax, reasonable viewBox, well-balanced colors ## Output Specification ```svg ``` - **Must include** `viewBox`, prefer square viewports (e.g., `100 100` or `400 400`) - **Always declare** `xmlns` namespace - **No external resources** (fonts/images), use built-in geometric shapes - **Close all tags**, use self-closing tags for brevity `` `` - **Prefer hex colors** `#2C3E50` or named colors ## Style System ### Flat Monochrome ```svg ``` - No gradients, no shadows, solid fill - Optional `rx/ry` for rounded corners - Typical sizes: icons 24×24~64×64, logos 100×100~400×400 ### Gradient ```svg ``` ### Stroke Style ```svg ``` ### Minimal Lines ```svg ``` ### Tech / Cyber ```svg ``` ### 3D Skeuomorphic ```svg ``` ## Common Palettes ```svg #3498DB #2980B9 #2C3E50 #1ABC9C #E67E22 #F39C12 #D35400 #E74C3C #2ECC71 #27AE60 #16A085 #1ABC9C #9B59B6 #8E44AD #6C3483 #5B2C6F #2C3E50 #34495E #7F8C8D #BDC3C7 #ECF0F1 #667EEA→#764BA2 #F093FB→#F5576C #4FACFE→#00F2FE #43E97B→#38F9D7 #FA709A→#FEE140 #A18CD1→#FBC2EB ``` ## Common Shape Reference | Element | Tag | Key Attributes | |---------|-----|----------------| | Rectangle | `` | `x y width height rx ry` | | Circle | `` | `cx cy r` | | Ellipse | `` | `cx cy rx ry` | | Line | `` | `x1 y1 x2 y2` | | Polygon | `` | `points="x,y x,y ..."` | | Path | `` | `d="M...L...Q...C...Z"` | | Text | `` | `x y font-family font-size text-anchor` | | Group | `` | Wrap elements for unified transforms/styles | ## Path Commands ``` M x,y — move to L x,y — line to H x — horizontal line V y — vertical line Q cx,cy x,y — quadratic bezier C c1x,c1y c2x,c2y x,y — cubic bezier A rx,ry x-axis-rotation large-arc-flag sweep-flag x,y — arc Z — close path ``` ## Reference Files | File | Content | |------|---------| | [references/templates.md](references/templates.md) | Logo/icon/illustration/UI component templates | | [references/examples.md](references/examples.md) | Complete SVG examples in different styles |

Natural Language to SVG Vector Graphic Code

Description

Latest Changes

Install Natural Language to SVG Vector Graphic Code with One Click