svg

by ivangdavila

Install this Skill

curl -fsSL -o svg.zip https://skill.seembox.com/api/v1/skills/svg/download && unzip svg.zip

SKILL.md About

---
name: SVG
version: 1.1.0
changelog: "Restructured with auxiliary files for focused reference"
description: Create and optimize SVG graphics with proper viewBox, accessibility, and CSS styling.
metadata: {"clawdbot":{"emoji":"📐","requires":{},"os":["linux","darwin","win32"]}}
---

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

<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

## Accessibility Mode

## Optimization

## Icon Defaults


```

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

_meta.json Metadata

{
  "ownerId": "kn73vp5rarc3b14rc7wjcw8f8580t5d1",
  "publishedAt": 1771184099817,
  "slug": "svg",
  "version": "1.1.0"
}