# Frog-SVG Library — Amphibian Field Journal

Hand-authored, code-drawn amphibian illustrations extracted from the SAVE THE FROGS! **Amphibian Field Journal** page (`/stf-field-guide/`). Each is a **standalone, self-contained `.svg`** — the hand-ink "roughen" displacement filter is embedded in every file, so it renders identically whether inlined, `<img>`-referenced, or CSS `background`-referenced. No external assets, no fonts. Zero photographs, zero generated images.

These seed the curated **frog-SVG library** (coordination follow-up, 2026-07-12). Storage home for the broader library is still TBD (repo `assets/` vs file-server) — see the bulletin follow-up before minting a new bucket.

## Contents

| File | Subject | viewBox | Style notes |
|------|---------|---------|-------------|
| `tree-frog.svg` | Tree frog, front sitting | 260×240 | Big domed gold eyes, toe discs, "smile" — the friendliest hook shape |
| `toad.svg` | True toad, front | 260×210 | Squat, warty, paired parotoid glands behind the eyes |
| `tadpole.svg` | Tadpole (larval) | 300×190 | Round head-body + translucent finned tail + eye |
| `spotted-salamander.svg` | Spotted salamander, side | 320×170 | Elongate dark body, yellow dorsal spots, four splayed legs |
| `egg-clutch.svg` | Amphibian egg clutch | 260×200 | Jelly capsules with dark embryos on a water line |
| `frog-topdown.svg` | Frog, top-down splayed | 420×380 | Anatomy pose: eyes on top, tympanum discs, webbed hind feet (no callout numbers) |

## Palette (brand-anchored)

- Living green `#9ac862` / `#8fbf5f` fills, ink `#2c4420`; brand green `#72af43` in the page around them.
- Iris/warm accent ochre `#d9a63a`; toad browns `#c1a05e`; salamander slate `#3b4a44` + spot gold `#d9b23c`.
- **Orange `#f5821f` is reserved for links/highlights on the page** — it is deliberately NOT used inside these specimen fills.

## Reuse

```html
<!-- inline (best for CSS control + accessibility) -->
<!-- paste the file contents; the embedded <filter> id is unique per subject file -->

<!-- or as an image -->
<img src="/stf-field-guide/art/tree-frog.svg" alt="Tree frog" width="240">
```

**Note on filter ids:** most files use `id="roughen"`; `egg-clutch.svg` uses `id="roughen2"` (finer grain). If you inline **two** files that share the same filter id on one page, rename one id to avoid a collision (the field-guide page itself defines the filters once in a shared `<defs>` and every inline drawing references them, so there is no collision there).

*Extracted 2026-07-15 (Claude Fable 5 session) from `public/stf-field-guide/index.html`.*