# SVG

> Create and optimize SVG graphics with proper viewBox, accessibility, and CSS styling.

- Skill: `modbender/svg` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add modbender/svg`
- Raw SKILL.md: https://api.skillmd.com/api/skills/modbender/svg/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: modbender (https://skillmd.com/u/modbender)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/modbender/svg

---


## Quick Reference

| Topic | File | Key Trap |
|-------|------|----------|
| viewBox & Scaling | `viewbox.md` | Missing viewBox = no scaling |
| Screen Readers | `accessibility.md` | role="img" + title as first child |
| SVGO Config | `optimization.md` | Default removes viewBox/title |
| Inline vs img | `embedding.md` | `<img>` cannot be styled with CSS |
| currentColor | `styling.md` | Hardcoded fills block theming |

## Critical Defaults

```svg
<!-- Minimum viable SVG -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
  <path d="..."/>
</svg>
```

## Common Mistakes Checklist

- [ ] viewBox present (not just width/height)
- [ ] Coordinates within viewBox bounds
- [ ] No hardcoded `fill="#000"` if theming needed
- [ ] `role="img"` + `<title>` for informative SVGs
- [ ] `aria-hidden="true"` for decorative SVGs
- [ ] Unique IDs across all inline SVGs on page
- [ ] xmlns included for external `.svg` files

## Memory Storage

User preferences persist in `~/svg/memory.md`. Create on first use.

```markdown
## User Preferences
<!-- SVG workflow defaults. Format: "setting: value" -->
<!-- Examples: default_viewbox: 0 0 24 24, prefer_inline: true -->

## Accessibility Mode
<!-- informative | decorative -->

## Optimization
<!-- Tool and settings. Format: "tool: setting" -->
<!-- Examples: svgo: preset-default, remove_metadata: true -->

## Icon Defaults
<!-- Fill and sizing preferences -->
<!-- Examples: fill: currentColor, default_size: 24x24 -->
```

*Empty sections = use skill defaults. Learns user preferences over time.*