SkillHub

svg

v1.1.0

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

Sourced from ClawHub, Authored by Iván

Installation

Please help me install the skill `svg` from SkillHub official store. npx skills add ivangdavila/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

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