SVG

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

$ git log --oneline --stat

stars:1,933

forks:367

updated:March 4, 2026

SKILL.mdreadonly

SKILL.md Frontmatter

nameSVG

version1.1.0

changelogRestructured with auxiliary files for focused reference

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

metadata[object Object]

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

<!-- 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.

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