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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300" width="100%" height="100%">
  <!-- content -->
</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 <circle/> <path/>
• Prefer hex colors #2C3E50 or named colors

Style System#

Flat Monochrome#

svg

<rect x="20" y="20" width="60" height="60" rx="8" fill="#3498DB"/>

• No gradients, no shadows, solid fill
• Optional rx/ry for rounded corners
• Typical sizes: icons 24×2464×64, logos 100×100400×400

Gradient#

svg

<defs>
  <linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%" stop-color="#667EEA"/>
    <stop offset="100%" stop-color="#764BA2"/>
  </linearGradient>
  <radialGradient id="g2" cx="50%" cy="50%" r="50%">
    <stop offset="0%" stop-color="#FF6B6B"/>
    <stop offset="100%" stop-color="#C0392B"/>
  </radialGradient>
</defs>
<circle cx="50" cy="50" r="40" fill="url(#g1)"/>

Stroke Style#

svg

<circle cx="50" cy="50" r="40" fill="none" stroke="#2C3E50" stroke-width="3" stroke-linecap="round"/>
<path d="M20 20 L60 60" stroke="#E74C3C" stroke-width="4" stroke-linejoin="round"/>

Minimal Lines#

svg

<path d="M10 50 Q 30 10, 50 50 T 90 50" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round"/>

Tech / Cyber#

svg

<rect x="10" y="10" width="80" height="80" rx="4" fill="#0a1628" stroke="#00d4ff" stroke-width="1"/>
<circle cx="50" cy="50" r="20" fill="none" stroke="#00d4ff" stroke-width="1" stroke-dasharray="3,3"/>

3D Skeuomorphic#

svg

<defs>
  <linearGradient id="shine" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" stop-color="#fff" stop-opacity=".3"/>
    <stop offset="100%" stop-color="#fff" stop-opacity="0"/>
  </linearGradient>
</defs>
<rect x="20" y="20" width="60" height="60" rx="12" fill="#E74C3C"/>
<rect x="20" y="20" width="60" height="30" rx="12" fill="url(#shine)"/>

Common Palettes#

svg

<!-- Brand Blues -->
#3498DB #2980B9 #2C3E50 #1ABC9C
<!-- Warm Oranges -->
#E67E22 #F39C12 #D35400 #E74C3C
<!-- Natural Greens -->
#2ECC71 #27AE60 #16A085 #1ABC9C
<!-- Elegant Purples -->
#9B59B6 #8E44AD #6C3483 #5B2C6F
<!-- Neutrals -->
#2C3E50 #34495E #7F8C8D #BDC3C7 #ECF0F1
<!-- Gradient Combos -->
#667EEA→#764BA2  #F093FB→#F5576C  #4FACFE→#00F2FE
#43E97B→#38F9D7  #FA709A→#FEE140  #A18CD1→#FBC2EB

Common Shape Reference#

ElementTagKey AttributesRectangle<rect>``x y width height rx ryCircle<circle>``cx cy rEllipse<ellipse>``cx cy rx ryLine<line>``x1 y1 x2 y2Polygon<polygon>``points="x,y x,y ..."Path<path>``d="M...L...Q...C...Z"Text<text>``x y font-family font-size text-anchorGroup<g>Wrap elements for unified transforms/styles

Path Commands#

text

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#

FileContentreferences/templates.mdLogo/icon/illustration/UI component templatesreferences/examples.mdComplete SVG examples in different styles