svg-graphics

Files (1)

• SKILL.md

SKILL.md (first lines)

# 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 |
| Desktop/app UI mockups | [app-ui-mockups.md](references/app-ui-mockups.md) | Window chrome, sidebars, code diffs |
| SaaS product mockups | [product-ui-mockups.md](references/product-ui-mockups.md) | Floating panels, shadows, badges |
| Hand-drawn sketches | [sketch-explainers.md](references/sketch-explainers.md) | Wobbly lines, blue/red ink, notebook |
| Monoline icon systems | [monoline-icons.md](references/monoline-icons.md) | Uniform stroke, no fill, Apple style |
| Blog featured images | [featured-images.md](references/featured-images.md) | 2400x1260, FA icons, depth layers |

## 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

**Default: Site Theme** (from `globals.css`). Use this unless the user specifies otherwise:

```
Primary:    #C0392B (red — brand color, CTAs, emphasis)
Secondary:  #2D3748 (dark blue-gray — headings, dark backgrounds)
Tertiary:   #16A085 (teal — success, positive indicators)
Action:     #2563EB (blue — links, interactive elements)
Accent:     #F59E0B (amber — warnings, highlights, badges)
Text:       #212121 (near-black — body text, labels)
Background: #FFFFFC (off-white — card/surface backgrounds)
Border:     #DDDDDD (light gray — borders, dividers)
```

Light tints (for backgrounds/fills): mix theme colors with white at 10-20% opacity.
Dark shades (for contrast): mix with `#2D3748` at 25-50%.

For additional palettes, see [colors.md](references/colors.md).
Limit to 2-3 colors per graphic unless design requires more.

## Typography

**Heading font** (titles, section headers):
```svg
<text font-family="'Really Sans Large', system-ui, sans-serif"
      font-size="28" font-weight="700" fill="#212121">Title</text>
```

**Body font** (labels, captions, body text):
```svg
<text font-family="'Really Sans Small', system-ui, sans-serif"
      font-size="14" fill="#212121">Label</text>
```

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

**Font weight**: Use `font-weight` attribute (100-900). Both font families support variable weights.

**Background preference**: Default to light backgrounds (`#FFFFFC`, `#FFFFFE`, or light gradients). Only use dark backgrounds when explicitly requested.

## Icons — FontAwesome

When SVGs need icons (UI mockups, infographics, marketing graphics, dashboards), use FontAwesome.

### Local Installation (Preferred)

FontAwesome Pro is installed locally:

```
~/Icons/svgs/
├── solid/       (primary, filled style)
├── regular/     (outline style, lighter)
├── light/       (thinner outline style)
├── thin/        (thinnest outline style)
├── duotone/     (two-tone layered style)
├── sharp-solid/ (sharp corners, filled)
├── sharp-regular/ (sharp corners, outline)
├── sharp-light/ (sharp corners, light)
└── brands/      (WordPress, YouTube, GitHub, etc.)
```

**How to use:**
1. Read the `.svg` file to get the `<path d="...">` and `viewBox`
2. Embed inline using `<g>` with transform for positioning/scaling

```svg
<g transform="translate(100, 200) scale(0.08)">
  <path d="M0 64C0 28.7 28.7 0 64 0L352..." fill="#2D3748"/>
</g>
```

**Scaling math:** FontAwesome icons use large viewBoxes (typically `0 0 512 512` or `0 0 640 512`).
Formula: `scale = target_size / icon_viewbox_width`

| Target Size | Scale (512 vBox) | Scale (640 vBox) |
|-------------|-----------------|-----------------|
| 24px | 0.047 | 0.038 |
| 32px | 0.063 | 0.05 |
| 48px | 0.094 | 0.075 |
| 64px | 0.125 | 0.1 |
| 96px | 0.188 | 0.15 |

From wpgaurav/WordPress-skills, MIT.

More from wpgaurav/WordPress-skills