# SVG Templates

## Logo Templates

### Icon + Text Logo
```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 120">
  <rect x="10" y="20" width="80" height="80" rx="16" fill="#3498DB"/>
  <path d="M30 60 L50 40 L70 60 L50 80 Z" fill="white"/>
  <text x="110" y="60" font-family="Arial,sans-serif" font-size="36" font-weight="bold" fill="#2C3E50">Brand</text>
  <text x="110" y="85" font-family="Arial,sans-serif" font-size="16" fill="#7F8C8D">Tagline goes here</text>
</svg>
```

### Abstract Graphic Logo
```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="95" fill="none" stroke="#2C3E50" stroke-width="6"/>
  <path d="M50 130 Q 100 40, 150 130" fill="none" stroke="#E74C3C" stroke-width="8" stroke-linecap="round"/>
  <circle cx="65" cy="140" r="5" fill="#E74C3C"/>
  <circle cx="135" cy="140" r="5" fill="#E74C3C"/>
</svg>
```

### Geometric Badge Logo
```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <polygon points="100,10 190,50 190,150 100,190 10,150 10,50" fill="#8E44AD" stroke="#6C3483" stroke-width="3"/>
  <polygon points="100,30 170,60 170,140 100,170 30,140 30,60" fill="none" stroke="white" stroke-width="2" opacity=".4"/>
  <text x="100" y="105" font-family="Arial" font-size="14" fill="white" text-anchor="middle" font-weight="bold">AI</text>
  <text x="100" y="125" font-family="Arial" font-size="8" fill="white" text-anchor="middle" opacity=".8">LAB</text>
</svg>
```

## Icon Templates

### 24×24 UI Icon
```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M3 12L12 3l9 9"/>
  <path d="M5 10v9a1 1 0 001 1h4v-5h4v5h4a1 1 0 001-1v-9"/>
</svg>
```

### 48×48 Feature Icon
```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
  <rect x="8" y="8" width="32" height="32" rx="8" fill="#3498DB" opacity=".15"/>
  <rect x="12" y="12" width="24" height="24" rx="6" fill="#3498DB"/>
  <circle cx="36" cy="12" r="8" fill="#E74C3C"/>
  <text x="36" y="16" font-family="Arial" font-size="10" fill="white" text-anchor="middle" font-weight="bold">3</text>
</svg>
```

## Illustration Templates

### Scene Illustration (Flat Style)
```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300">
  <rect width="400" height="300" fill="#E8F4F8"/>
  <circle cx="320" cy="60" r="40" fill="#F1C40F"/>
  <polygon points="0,250 100,120 200,250" fill="#2ECC71" opacity=".6"/>
  <polygon points="100,250 250,100 400,250" fill="#27AE60" opacity=".4"/>
  <polygon points="200,250 350,150 400,250" fill="#1ABC9C" opacity=".5"/>
  <rect x="0" y="250" width="400" height="50" fill="#27AE60"/>
  <rect x="80" y="218" width="6" height="32" fill="#8B4513"/>
  <circle cx="83" cy="205" r="20" fill="#2ECC71"/>
  <rect x="300" y="225" width="5" height="25" fill="#8B4513"/>
  <circle cx="302.5" cy="215" r="15" fill="#34D399"/>
  <ellipse cx="120" cy="50" rx="30" ry="12" fill="white" opacity=".8"/>
  <ellipse cx="140" cy="45" rx="25" ry="10" fill="white" opacity=".9"/>
  <ellipse cx="110" cy="55" rx="20" ry="8" fill="white" opacity=".7"/>
</svg>
```

### Data Illustration
```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
  <rect width="300" height="200" fill="#F8FAFC"/>
  <rect x="40" y="120" width="40" height="60" rx="4" fill="#3498DB"/>
  <rect x="90" y="80" width="40" height="100" rx="4" fill="#2ECC71"/>
  <rect x="140" y="60" width="40" height="120" rx="4" fill="#E74C3C"/>
  <rect x="190" y="100" width="40" height="80" rx="4" fill="#F39C12"/>
  <polyline points="40,120 90,80 140,60 190,100" fill="none" stroke="#2C3E50" stroke-width="2"/>
  <circle cx="40" cy="120" r="4" fill="#2C3E50"/>
  <circle cx="90" cy="80" r="4" fill="#2C3E50"/>
  <circle cx="140" cy="60" r="4" fill="#2C3E50"/>
  <circle cx="190" cy="100" r="4" fill="#2C3E50"/>
</svg>
```

## UI Component Templates

### Button
```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 44">
  <rect x="0" y="0" width="140" height="44" rx="22" fill="#3498DB"/>
  <text x="70" y="28" font-family="Arial,sans-serif" font-size="16" fill="white" text-anchor="middle" font-weight="bold">Get Started</text>
</svg>
```

### Card
```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 160">
  <rect x="0" y="0" width="240" height="160" rx="12" fill="white" stroke="#E2E8F0" stroke-width="1"/>
  <rect x="20" y="20" width="48" height="48" rx="10" fill="#667EEA"/>
  <text x="20" y="90" font-family="Arial" font-size="16" font-weight="bold" fill="#2D3748">Title</text>
  <text x="20" y="112" font-family="Arial" font-size="12" fill="#718096">Description text goes here</text>
  <text x="20" y="135" font-family="Arial" font-size="10" fill="#A0AEC0">2024-01-01</text>
</svg>
```

### Progress Bar
```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 20">
  <rect x="0" y="6" width="200" height="8" rx="4" fill="#E2E8F0"/>
  <rect x="0" y="6" width="140" height="8" rx="4" fill="#48BB78"/>
  <text x="155" y="14" font-family="Arial" font-size="10" fill="#718096">70%</text>
</svg>
```