SVG Design

SVG Creation and Editing

Core principle: SVGs are code. Write them by hand like you’d write any markup: clean, minimal, semantically meaningful. Every element and attribute should earn its place.

Topic Routing

SVG Skeleton

Always start from this structure:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <!-- content -->
</svg>

Adjust viewBox to match the design canvas. Omit width/height attributes to let the SVG scale with its container (add them only when a fixed size is needed).

Canvas Size Conventions

Default to 24x24 unless there’s a reason not to. It’s the industry standard.

Shape vs Path Decision

Styling Defaults

Set these on the root <svg> element to avoid repetition on children:

currentColor is your friend. It lets the SVG inherit whatever color the parent element has, making icons themeable with zero extra CSS.

Stroke-Width Relative to ViewBox

stroke-width is in viewBox units, not pixels. Always set relative to your canvas dimensions:

When to Convert Shapes to Paths

Convert when:

• Combining multiple shapes into a single compound path (boolean operations)
• You need the shape as part of a larger path composition
• Distributing to environments that only support <path>
• Optimizing for minimal DOM elements

Keep as shapes when:

• Code readability matters (a <circle> is self-documenting)
• You need to animate specific properties (animating r on a circle is cleaner than animating path data)
• The SVG will be programmatically modified

Rounded rect-to-path template

The arc parameters here are error-prone to derive. Use this as a reference:

<!-- <rect x="2" y="2" width="20" height="20" rx="3" /> becomes: -->
<path d="M 5 2 h 14 a 3 3 0 0 1 3 3 v 14 a 3 3 0 0 1 -3 3 h -14 a 3 3 0 0 1 -3 -3 v -14 a 3 3 0 0 1 3 -3 Z" />

fill-rule: evenodd vs nonzero

Use evenodd when you have compound shapes with holes. It’s simpler because you don’t need to worry about winding direction:

<!-- Donut using evenodd (direction doesn't matter) -->
<path fill-rule="evenodd" d="
  M 12 2 A 10 10 0 1 1 12 22 A 10 10 0 1 1 12 2 Z
  M 12 7 A 5 5 0 1 1 12 17 A 5 5 0 1 1 12 7 Z
" fill="black" />

With nonzero (default), the inner circle must wind in the opposite direction to create the hole.

Logo Design Process

When creating logos (not icons), follow this process:

0. Always clarify design direction before creating logos. Use AskUserQuestion to present curated design direction choices before writing any SVG code. This step is mandatory for all logo projects. Even when the user provides some direction (like “modern” or “YC style”), those are vibes, not design briefs. A designer would still present options to narrow the direction before investing in 5-15 concepts.

   Present choices like a designer showing mood boards. Don’t ask open-ended questions. Tailor options to the user’s domain:

   Copy

   AskUserQuestion({
     questions: [
       {
         question: "What visual personality fits your brand?",
         header: "Mood",
         multiSelect: false,
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

Anti-Patterns

Cross-References

• Design aesthetics: If the ce plugin is installed, Skill(ce:design) covers broader visual design decisions
• Mermaid diagrams: If the ce plugin is installed, Skill(ce:visualizing-with-mermaid) covers diagram-specific visualizations (not SVG)