creating-svg-illustrations

# Creating SVG Illustrations

Transform descriptions into production-ready SVG code for icons, logos, illustrations, and web graphics.

## What This Skill Does

This skill generates clean, optimized, and accessible SVG code from natural language descriptions. The output is ready for immediate use in web projects, design systems, or applications.

## SVG Fundamentals

### Basic Structure

```svg
<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  width="24"
  height="24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <!-- Elements go here -->
</svg>
```

### Common Elements

| Element | Use Case | Example |
|---------|----------|---------|
| `<path>` | Complex shapes | `<path d="M12 2L2 7l10 5 10-5-10-5z"/>` |
| `<circle>` | Circles | `<circle cx="12" cy="12" r="10"/>` |
| `<rect>` | Rectangles | `<rect x="2" y="2" width="20" height="20" rx="4"/>` |
| `<line>` | Lines | `<line x1="0" y1="0" x2="24" y2="24"/>` |
| `<polyline>` | Connected lines | `<polyline points="4,12 8,8 12,12"/>` |
| `<polygon>` | Closed shapes | `<polygon points="12,2 22,22 2,22"/>` |
| `<ellipse>` | Ovals | `<ellipse cx="12" cy="12" rx="10" ry="6"/>` |
| `<text>` | Text | `<text x="12" y="12">Hello</text>` |

## Icon Design Patterns

### Minimal Line Icons (Feather/Lucide Style)

```svg
<!-- Checkmark -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <polyline points="20 6 9 17 4 12"/>
</svg>

<!-- Search -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="11" cy="11" r="8"/>
  <line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg>

<!-- Menu (hamburger) -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="3" y1="6" x2="21" y2="6"/>
  <line x1="3" y1="12" x2="21" y2="12"/>
  <line x1="3" y1="18" x2="21" y2="18"/>
</svg>
```

### Filled Icons (Heroicons Solid Style)

```svg
<!-- Star -->
<svg viewBox="0 0 24 24" fill="currentColor">
  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>

<!-- Heart -->
<svg viewBox="0 0 24 24" fill="currentColor">
  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
</svg>
```

### Duotone Icons

```svg
<!-- Folder with document -->
<svg viewBox="0 0 24 24">
  <path fill="#E5E7EB" d="M3 6a2 2 0 012-2h4l2 2h8a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V6z"/>
  <path fill="#6B7280" d="M9 9h6v2H9V9zm0 4h6v2H9v-2z"/>
</svg>
```

## Illustration Patterns

### Geometric Abstract

```svg
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <!-- Background circle -->
  <circle cx="100" cy="100" r="90" fill="#F3F4F6"/>

  <!-- Decorative shapes -->
  <circle cx="70" cy="80" r="30" fill="#3B82F6" opacity="0.8"/>
  <circle cx="130" cy="70" r="20" fill="#10B981" opacity="0.8"/>
  <rect x="80" y="110" width="60" height="40" rx="8" fill="#8B5CF6" opacity="0.8"/>

  <!-- Accent elements -->
  <circle cx="150" cy="130" r="15" fill="#F59E0B" opacity="0.6"/>
</svg>
```

### Organic/Blob Shapes

```svg
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <path fill="#667EEA" d="M44.7,-76.4C58.8,-69.2,71.8,-59.1,79.6,-45.8C87.4,-32.5,90,-16.3,88.5,-0.9C87,14.5,81.4,29,73.1,42.1C64.8,55.2,53.8,66.9,40.4,74.1C27,81.3,11.2,84,-3.6,89.2C-18.4,94.4,-32.2,102,-45.5,100.7C-58.8,99.4,-71.7,89.2,-79.8,75.8C-87.9,62.4,-91.2,45.8,-91.8,29.8C-92.4,13.8,-90.3,-1.6,-85.1,-15.2C-79.9,-28.8,-71.6,-40.6,-60.8,-50.3C-50,-60,-36.7,-67.6,-23.1,-75.5C-9.5,-83.4,4.4,-91.6,18.5,-91.8C32.6,-92,46.9,-84.2,44.7,-76.4Z" transform="translate(100 100)"/>
</svg>
```

### Isometric Elements

```svg
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Isometric cube -->
  <polygon points="50,10 90,30 90,70 50,90 10,70 10,30" fill="#E5E7EB"/>
  <polygon points="50,10 90,30 50,50 10,30" fill="#F9FAFB"/>
  <polygon points="50,50 90,30 90,70 50,90" fill="#D1D5DB"/>
  <polygon points="50,50 10,30 10,70 50,90" fill="#9CA3AF"/>
</svg>
```

## Logo Design Patterns

### Minimal Logomark

```svg
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <!-- Primary shape -->
  <rect x="8" y="8" width="32" height="32" rx="8" fill="#2563EB"/>

  <!-- Letter or symbol -->
  <path d="M24 16v16M16 24h16" stroke="white" stroke-width="3" stroke-linecap="round"/>
</svg>
```

### Gradient Logo

```svg
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="brand-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#667EEA"/>
      <stop offset="100%" stop-color="#764BA2"/>
    </linearGradient>
  </defs>
  <circle cx="24" cy="24" r="20" fill="url(#brand-gradient)"/>
  <path d="M18 24l4 4 8-8" stroke="white" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
```

## Animation Patterns

### Spinner

```svg
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <style>
    .spinner { animation: rotate 1s linear infinite; transform-origin: center; }
    @keyframes rotate { to { transform: rotate(360deg); } }
  </style>
  <circle class="spinner" cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="32" stroke-linecap="round"/>
</svg>
```

### Pulse Effect

```svg
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <style>
    .pulse { animation: pulse 2s ease-in-out infinite; }
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(1.1); }
    }
  </style>
  <circle class="pulse" cx="12" cy="12" r="8" fill="#EF4444"/>
</svg>
```

## Optimization Tips

### 1. Remove Unnecessary Attributes
```svg
<!-- Before -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">

<!-- After -->
<svg xmlns="http://www.w3.org/2000/svg">
```

### 2. Simplify Paths
Use tools like SVGO or simplify manually:
```svg
<!-- Before: Too many decimal places -->
<path d="M12.0000 2.0000L22.0000 22.0000"/>

<!-- After: Simplified -->
<path d="M12 2L22 22"/>
```

### 3. Use Symbols for Reuse
```svg
<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <symbol id="icon-star" viewBox="0 0 24 24">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
    </symbol>
  </defs>
  <use href="#icon-star" x="0" y="0" width="24" height="24"/>
  <use href="#icon-star" x="30" y="0" width="24" height="24"/>
</svg>
```

## Accessibility

Always include accessibility attributes:

```svg
<svg
  viewBox="0 0 24 24"
  role="img"
  aria-labelledby="title desc"
>
  <title id="title">Shopping Cart</title>
  <desc id="desc">A shopping cart icon indicating items for purchase</desc>
  <!-- SVG content -->
</svg>
```

For decorative icons:
```svg
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  <!-- Decorative content -->
</svg>
```

## Color Systems

### Using CSS Custom Properties
```svg
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <style>
    .primary { fill: var(--color-primary, #3B82F6); }
    .secondary { fill: var(--color-secondary, #10B981); }
  </style>
  <circle class="primary" cx="12" cy="8" r="6"/>
  <circle class="secondary" cx="12" cy="18" r="4"/>
</svg>
```

### Dark Mode Support
```svg
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <style>
    .icon-fill { fill: #1F2937; }
    @media (prefers-color-scheme: dark) {
      .icon-fill { fill: #F9FAFB; }
    }
  </style>
  <path class="icon-fill" d="..."/>
</svg>
```

## Output Format

When generating SVGs, provide:

1. **Complete SVG code** - Production-ready, optimized
2. **Inline usage** - How to embed in HTML
3. **React component** - JSX version if applicable
4. **CSS customization** - How to style with CSS
5. **Size variants** - Recommendations for different sizes