Create professional SVG logos from descriptions and design specifications. Generates multiple logo variations with different layouts, styles, and concepts...
This skill creates professional, scalable vector graphic (SVG) logos from design specifications, offering multiple variations and layout options.
Activate this skill when the user requests:
When a user requests a logo, gather comprehensive design requirements:
Brand Information
Design Preferences
Style Guidelines
Technical Requirements
Number of Variations
Create multiple logo concepts based on requirements:
Develop the main design direction:
Design Thinking:
SVG Structure:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
<defs>
<!-- Gradients, patterns, filters -->
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#4F46E5;stop-opacity:1" />
<stop offset="100%" style="stop-color:#7C3AED;stop-opacity:1" />
</linearGradient>
</defs>
<!-- Logo elements -->
<g id="logo-symbol">
<!-- Symbol/icon elements -->
</g>
<g id="logo-text">
<!-- Text elements (if applicable) -->
</g>
</svg>
Create variations exploring different visual approaches:
For each concept, create multiple layout options:
Create professional, optimized SVG code:
Best Practices:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60">
<!-- Use groups for organization -->
<g id="icon">
<!-- Icon elements -->
</g>
<g id="wordmark">
<!-- Text elements -->
</g>
</svg>
Scalable Design
Color Management
<!-- Define colors once, reuse throughout -->
<defs>
<style>
.primary { fill: #4F46E5; }
.secondary { fill: #10B981; }
.text { fill: #1F2937; }
</style>
</defs>
<rect class="primary" x="0" y="0" width="100" height="100" />
Optimization
Accessibility
<svg role="img" aria-labelledby="logo-title logo-desc">
<title id="logo-title">Company Name Logo</title>
<desc id="logo-desc">A blue circular icon with the company name</desc>
<!-- Logo content -->
</svg>
Present logos in an organized, professional manner:
# Logo Design Concepts
## Concept 1: [Concept Name/Theme]
### Design Rationale
[Explain the thinking behind this design, visual metaphors used, and how it represents the brand]
### Primary Logo (Horizontal)
```xml
<svg><!-- SVG code here --></svg>
Usage: Headers, website navigation, business cards Dimensions: 200×60px (scalable)
<svg><!-- SVG code here --></svg>
Usage: Social media profiles, mobile apps Dimensions: 100×120px (scalable)
<svg><!-- SVG code here --></svg>
Usage: Favicon, app icon, small spaces Dimensions: 64×64px (scalable)
Full Color:
Monochrome (Dark):
Monochrome (Light):
Reversed:
[Repeat structure for additional concepts]
### Phase 6: File Generation
Save SVG files with proper naming:
```javascript
// File naming convention
company-name-logo-concept1-horizontal.svg
company-name-logo-concept1-vertical.svg
company-name-logo-concept1-icon.svg
company-name-logo-concept2-horizontal.svg
// etc.
Use the Write tool to save each variation:
// Example
Write({
file_path: "./logos/acme-logo-concept1-horizontal.svg",
content: svgCode
});
Provide comprehensive usage documentation:
# Logo Usage Guidelines
## File Formats Provided
### SVG (Scalable Vector Graphics)
- **Use for:** Websites, digital applications, large prints
- **Benefits:** Infinitely scalable, small file size, editable
- **How to use:** Embed directly in HTML or open in design tools
### Exporting to PNG
If you need PNG format:
**Option 1: Using Inkscape (Free)**
```bash
inkscape logo.svg --export-png=logo.png --export-width=1000
Option 2: Using ImageMagick
convert -background none logo.svg logo.png
Option 3: Online Converter
Maintain minimum clear space around logo:
Website Headers:
Social Media:
Print Materials:
❌ Do Not:
logos/
concept-1/
horizontal/
full-color.svg
monochrome-dark.svg
monochrome-light.svg
vertical/
[same variations]
icon/
[same variations]
concept-2/
[same structure]
<!-- Inline SVG (Recommended for control) -->
<svg><!-- SVG code --></svg>
<!-- Image tag (Simpler) -->
<img src="logo.svg" alt="Company Name Logo" />
<!-- CSS Background -->
.logo {
background-image: url('logo.svg');
background-size: contain;
}
.logo {
width: 100%;
max-width: 200px;
height: auto;
}
/* Mobile */
@media (max-width: 768px) {
.logo {
max-width: 150px;
}
}
## Design Patterns & Examples
### Wordmark Logo
```xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 80">
<defs>
<style>
.wordmark {
font-family: 'Helvetica', sans-serif;
font-size: 48px;
font-weight: 700;
fill: #1F2937;
}
</style>
</defs>
<text x="10" y="60" class="wordmark">COMPANY</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#4F46E5" />
<stop offset="100%" style="stop-color:#7C3AED" />
</linearGradient>
</defs>
<!-- Hexagon shape -->
<polygon
points="50,5 95,27.5 95,72.5 50,95 5,72.5 5,27.5"
fill="url(#grad)"
stroke="#312E81"
stroke-width="2"
/>
<!-- Inner element -->
<circle cx="50" cy="50" r="20" fill="#FFFFFF" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<!-- Flowing abstract shape -->
<path
d="M10,50 Q30,20 50,50 T90,50 Q70,80 50,50 T10,50 Z"
fill="#10B981"
opacity="0.8"
/>
<path
d="M15,55 Q35,25 55,55 T95,55"
fill="none"
stroke="#059669"
stroke-width="3"
stroke-linecap="round"
/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80">
<!-- Icon -->
<g id="icon">
<circle cx="40" cy="40" r="30" fill="#4F46E5" />
<path d="M30,35 L35,45 L50,25" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round" />
</g>
<!-- Text -->
<g id="text">
<text x="85" y="45" font-family="Arial, sans-serif" font-size="28" font-weight="700" fill="#1F2937">
COMPANY
</text>
</g>
</svg>
Help users choose appropriate colors:
Blue (#0066CC, #4F46E5)
Green (#10B981, #059669)
Red (#DC2626, #EF4444)
Purple (#7C3AED, #8B5CF6)
Orange (#F97316, #FB923C)
Yellow (#FBBF24, #FCD34D)
Black/Gray (#1F2937, #6B7280)
After presenting initial concepts:
Gather Feedback
Refine Selected Concept
Create Final Variations
Deliver Final Package
When working with users:
Understand the Brand
Explain Design Choices
Provide Options
Be Flexible
Educate
Provide complete logo package:
SVG Files
Documentation
Technical Info
Optional: Mockups
User Request:
"Create a logo for my tech startup called 'CloudSync'. We provide cloud storage solutions. Looking for something modern and trustworthy."
Your Response:
Clarify:
Develop Concepts:
Create Variations:
Present:
Refine:
Remember: Great logos are simple, memorable, timeless, versatile, and appropriate. Focus on creating designs that will work across all applications and stand the test of time!
