SVG Drawing Guide

A complete reference and methodology for hand-crafting SVG (Scalable Vector Graphics) code. Use this skill whenever you need to create or modify SVG files directly in code — icons, favicons, illustrations, badges, diagrams, or any vector graphic.

When to Use This Skill

• User asks to create/draw/design an SVG icon, favicon, logo, badge, illustration
• User asks to modify or fix an existing SVG file
• User needs an SVG element for a web component (spinner, decorative shape, etc.)
• User wants to understand SVG syntax or debug SVG code

1. SVG Fundamentals

The <svg> Root Element

Every SVG starts with the <svg> element. Always include xmlns for standalone files: