← Back to Skills Marketplace

Natural Language to SVG Vector Graphic Code

Name: Natural Language to SVG Vector Graphic Code
Author: openlark

by OpenLark · GitHub ↗ · v1.0.0 · MIT-0

cross-platform ✓ Security Clean

Downloads

Stars

Active Installs

Versions

Install in OpenClaw

/install text-to-svg

Description

Generate logos, icons, illustrations and other vector graphics from natural language descriptions. Supports style directives (flat monochrome/gradient/stroke...

README (SKILL.md)

Text-to-SVG — Natural Language to SVG Vector Graphic Code

Convert natural language descriptions into runnable SVG vector graphic code.

Workflow

Parse requirements — Identify objects, style, colors, dimensions from description
Determine structure — Choose appropriate SVG element composition (paths/shapes/text/gradients)
Generate code — Output complete code ready for embedding or saving as .svg
Validate output — Ensure correct SVG syntax, reasonable viewBox, well-balanced colors

Output Specification

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

Style System

Flat Monochrome

\x3Crect 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×24~~64×64, logos 100×100~~400×400

Gradient

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

Stroke Style

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

Minimal Lines

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

Tech / Cyber

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

3D Skeuomorphic

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

Common Palettes

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

Common Shape Reference

Element	Tag	Key Attributes
Rectangle	`\x3Crect>`	`x y width height rx ry`
Circle	`\x3Ccircle>`	`cx cy r`
Ellipse	`\x3Cellipse>`	`cx cy rx ry`
Line	`\x3Cline>`	`x1 y1 x2 y2`
Polygon	`\x3Cpolygon>`	`points="x,y x,y ..."`
Path	`\x3Cpath>`	`d="M...L...Q...C...Z"`
Text	`\x3Ctext>`	`x y font-family font-size text-anchor`
Group	`\x3Cg>`	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	Logo/icon/illustration/UI component templates
references/examples.md	Complete SVG examples in different styles

Usage Guidance

Reasonable to install for SVG drafting. As with any generated SVG, review the output before embedding it in a website or app, especially if you later add scripts, external links, fonts, or images.

Capability Tags

crypto

Capability Assessment

ℹ Purpose & Capability

The artifacts consistently describe natural-language-to-SVG generation using templates, palettes, and examples; the metadata has an odd 'crypto' capability tag, but the artifact content does not request or implement crypto-related behavior.

✓ Instruction Scope

Instructions are limited to generating and validating SVG markup, including a clear rule to avoid external resources.

✓ Install Mechanism

The package contains only SKILL.md and Markdown reference files; no executable scripts, dependencies, or install hooks were present.

✓ Credentials

The skill does not ask to read local files, use credentials, call networks, run commands, or access sensitive environments.

✓ Persistence & Privilege

No background workers, persistence mechanisms, privilege escalation, account mutation, or session/profile use were found.

How to Use

Make sure OpenClaw is installed (local or Docker)
Run the install command in chat: /install text-to-svg
After installation, invoke the skill by name or use /text-to-svg
Provide required inputs per the skill's parameter spec and get structured output

Version History

v1.0.0

- Initial release of text-to-svg. - Converts natural language descriptions into SVG vector graphic code. - Supports multiple styles: flat monochrome, gradient, stroke, minimal, tech/cyber, and 3D skeuomorphic. - Provides style directives and sample palettes for branding, icons, and illustrations. - Output is valid, standalone SVG markup following strict formatting guidelines.

Metadata

Slug text-to-svg

Version 1.0.0

License MIT-0

All-time Installs 0

Active Installs 0

Total Versions 1

Frequently Asked Questions

What is Natural Language to SVG Vector Graphic Code?

Generate logos, icons, illustrations and other vector graphics from natural language descriptions. Supports style directives (flat monochrome/gradient/stroke... It is an AI Agent Skill for Claude Code / OpenClaw, with 10 downloads so far.

How do I install Natural Language to SVG Vector Graphic Code?

Run "/install text-to-svg" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.

Is Natural Language to SVG Vector Graphic Code free?

Yes, Natural Language to SVG Vector Graphic Code is completely free, licensed under MIT-0. You can download, install and use it at no cost.

Which platforms does Natural Language to SVG Vector Graphic Code support?

Natural Language to SVG Vector Graphic Code is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).

Who created Natural Language to SVG Vector Graphic Code?

It is built and maintained by OpenLark (@openlark); the current version is v1.0.0.

More Skills