---
name: svg-graphics
description: Create professional SVG graphics including data visualizations (pie charts, bar charts, line graphs, donut charts), flat illustrations (people, icons, objects, devices), dashboard mockups, marketing graphics, and infographics. Use when user requests charts, diagrams, illustrations, infographics, dashboards, marketing visuals, UI mockups, or any vector graphic. Outputs clean, scalable SVG code optimized for web use.
---

# SVG Graphics Creation

Create professional vector graphics directly in SVG code. Output clean, well-structured SVG that renders beautifully at any scale.

## Quick Reference

Select the appropriate pattern based on request type:

| Request Type | Reference File | Key Elements |
|-------------|----------------|--------------|
| Pie/donut charts | [data-viz.md](references/data-viz.md) | Arcs, segments, legends |
| Bar/column charts | [data-viz.md](references/data-viz.md) | Rectangles, axes, labels |
| Line/area charts | [data-viz.md](references/data-viz.md) | Paths, points, gradients |
| People illustrations | [illustrations.md](references/illustrations.md) | Simplified human forms |
| Icons and objects | [illustrations.md](references/illustrations.md) | Geometric shapes, paths |
| Dashboard mockups | [dashboards.md](references/dashboards.md) | Cards, metrics, mini-charts |
| Marketing graphics | [marketing.md](references/marketing.md) | Bold typography, gradients |
| Infographics | [infographics.md](references/infographics.md) | Combined elements, flow |

## Core SVG Structure

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <defs>
    <!-- Gradients, patterns, filters -->
  </defs>
  <g id="background"><!-- Background elements --></g>
  <g id="content"><!-- Main content --></g>
  <g id="labels"><!-- Text labels --></g>
</svg>
```

## Color Palette System

Use the palette from [colors.md](references/colors.md). Default options:

**Professional Blue**: `#2563eb` (primary), `#64748b` (secondary), `#e2e8f0` (neutral)
**Warm Orange**: `#f97316` (primary), `#6b7280` (secondary), `#f5f5f4` (neutral)
**Corporate Green**: `#10b981` (primary), `#475569` (secondary), `#f0fdf4` (neutral)

Limit to 2-3 colors per graphic unless design requires more.

## Typography

Use system fonts for compatibility:

```svg
<text font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" 
      font-size="14" fill="#1e293b">Label</text>
```

**Size hierarchy**: Titles 24-32px, subtitles 16-20px, labels 12-14px, captions 10-12px

## Essential Techniques

### Rounded Rectangles
```svg
<rect x="10" y="10" width="100" height="50" rx="8" ry="8" fill="#2563eb"/>
```

### Arcs for Pie Charts
Calculate arc endpoints using: `x = cx + r * cos(angle)`, `y = cy + r * sin(angle)`
```svg
<path d="M cx cy L x1 y1 A r r 0 largeArc 1 x2 y2 Z" fill="#color"/>
```

### Smooth Curves
```svg
<path d="M 0 100 Q 50 50 100 100 T 200 100" stroke="#2563eb" fill="none"/>
```

### Drop Shadows
```svg
<defs>
  <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
    <feDropShadow dx="0" dy="4" stdDeviation="8" flood-opacity="0.1"/>
  </filter>
</defs>
<rect filter="url(#shadow)" .../>
```

## Output Guidelines

1. **Always include** `xmlns="http://www.w3.org/2000/svg"` and a `viewBox`
2. **Group related elements** using `<g>` with descriptive `id` attributes
3. **Use `<defs>`** for reusable elements, gradients, and filters
4. **Round numeric values** to 2 decimal places maximum
5. **Include readable whitespace** and indentation
6. **Add comments** for complex path data

## Execution Steps

1. Identify graphic type and read the appropriate reference file
2. Plan layout: dimensions, spacing, element positions
3. Define colors and gradients/filters in `<defs>`
4. Build structural elements (backgrounds, containers)
5. Add data elements (bars, slices, lines, illustrations)
6. Apply labels and text
7. Review spacing and alignment
8. Output as `.svg` file

For detailed patterns and examples, consult the reference files linked above.
