Creating SVG Assets

Create optimized SVG assets — logos, icons, badges, and illustrations — with optional PNG export.

Workflow

1. Determine asset type — Consult references/svg-design-patterns.md for type-specific guidelines (icon vs logo vs badge vs illustration).

2. Write the SVG — Create clean, semantic SVG markup:

   • Always include viewBox attribute
   • Use currentColor for themeable icons
   • Group related elements with <g>
   • Add <title> for accessibility

3. Optimize — Run SVGO optimization:

   node scripts/optimize-svg.js icon.svg --output icon.min.svg