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:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <!-- content -->
</svg>

Key attributes:

• xmlns="http://www.w3.org/2000/svg" — required for standalone .svg files, optional when inlined in HTML
• viewBox="minX minY width height" — defines the internal coordinate system (ALWAYS use this)
• width / height — sets the rendered size in the DOM (can also be controlled via CSS)

The viewBox — Most Important Concept

The viewBox creates an internal coordinate system independent of the SVG’s rendered size. This is what makes SVGs truly scalable.

<!-- This SVG will scale to any size while keeping proportions -->
<svg viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="80" />
</svg>

How viewBox works:

• viewBox="0 0 200 200" means: “My internal canvas goes from (0,0) to (200,200)”
• All child elements use this coordinate system
• The SVG scales to fit its container while preserving the viewBox aspect ratio
• Changing the first two values pans the view; changing the last two zooms in/out

Common viewBox patterns:

viewBox="0 0 24 24"     <!-- Standard icon size (Material, Lucide, etc.) -->
viewBox="0 0 32 32"     <!-- Favicon-sized -->
viewBox="0 0 100 100"   <!-- Easy percentage-like coordinates -->
viewBox="0 0 200 60"    <!-- Horizontal logo lockup -->

Rule: Always define a viewBox. Without it, the SVG uses raw pixel coordinates and won’t scale.

Coordinate System

• Origin (0, 0) is the top-left corner
• X increases to the right, Y increases downward (opposite of math convention)
• All units are unitless within viewBox — they map proportionally to rendered size

2. Basic Shape Elements

<line>

Draws a straight line between two points.

<line x1="10" y1="10" x2="90" y2="90" stroke="#34D399" stroke-width="3" />

<rect>

Draws a rectangle.

<rect x="10" y="10" width="80" height="60" rx="8" ry="8" fill="#4F46E5" />

<circle>

Draws a circle.

<circle cx="50" cy="50" r="40" fill="#06B6D4" />

<ellipse>

Like <circle> but with independent horizontal and vertical radii.

<ellipse cx="50" cy="50" rx="40" ry="25" fill="#8B5CF6" />

<polygon>

A closed shape defined by a set of points. The browser automatically connects the last point back to the first.

<polygon points="50,5 95,27.5 95,72.5 50,95 5,72.5 5,27.5" fill="#10B981" />

Tip: Use commas and newlines for readability — they’re valid SVG:

<polygon points="
  50,5
  95,27.5
  95,72.5
  50,95
  5,72.5
  5,27.5
" />

<polyline>

Like <polygon> but does NOT auto-close. Good for open shapes (charts, graphs).

<polyline points="10,90 30,40 50,70 70,20 90,60" fill="none" stroke="#F59E0B" stroke-width="2" />

<text>

Renders text inside SVG. Positioning is from the baseline.

<text x="50" y="50" font-family="Georgia, serif" font-size="24" fill="white" text-anchor="middle">
  Hello
</text>

Centering text perfectly:

<text x="50" y="50" text-anchor="middle" dominant-baseline="central" font-size="16">
  Centered
</text>

3. The <path> Element — The Most Powerful Shape

The <path> element can draw anything. It uses a mini-language of commands in its d attribute.

Path Commands Reference

All commands have uppercase (absolute coordinates) and lowercase (relative coordinates) variants.

Path Examples

Triangle:

<path d="M 50 10 L 90 90 L 10 90 Z" fill="#34D399" />

Rounded square (using curves):

<path d="M 20 8 H 80 Q 92 8 92 20 V 80 Q 92 92 80 92 H 20 Q 8 92 8 80 V 20 Q 8 8 20 8 Z" fill="#1E1B4B" />

Sigma symbol (Σ):

<path d="M 28 26 L 62 26 L 46 50 L 62 74 L 28 74"
      fill="none" stroke="#34D399" stroke-width="6"
      stroke-linecap="round" stroke-linejoin="round" />

Heart shape:

<path d="M 50 30 Q 50 10 30 10 Q 10 10 10 30 Q 10 50 50 80 Q 90 50 90 30 Q 90 10 70 10 Q 50 10 50 30 Z"
      fill="#EF4444" />

Understanding Bezier Curves

Cubic Bezier (C) — Two control points for complex curves:

C x1 y1, x2 y2, endX endY
    ^         ^       ^
    |         |       └── end point
    |         └── control point 2 (influences end)
    └── control point 1 (influences start)

Quadratic Bezier (Q) — One control point for simpler curves:

Q controlX controlY, endX endY

Smooth variants (S, T) mirror the previous control point automatically, creating smooth continuations.

Elliptical Arc (A)

The most complex command. Parameters:

A rx ry x-rotation large-arc-flag sweep-flag x y

• rx, ry — radii of the ellipse
• x-rotation — rotation of the ellipse in degrees
• large-arc-flag — 0 for minor arc, 1 for major arc
• sweep-flag — 0 for counter-clockwise, 1 for clockwise
• x, y — end point

Semicircle:

<path d="M 10 50 A 40 40 0 0 1 90 50" fill="none" stroke="#06B6D4" stroke-width="3" />

4. Presentational Attributes (Fill & Stroke)

Fill

Stroke

Important: Stroke is drawn on the center of the path, not inside or outside. A stroke-width="10" extends 5px inward and 5px outward from the path.

Opacity

All presentational attributes can also be set in CSS:

<style>
  .accent { fill: #34D399; stroke: #06B6D4; stroke-width: 2; }
</style>
<circle class="accent" cx="50" cy="50" r="30" />

5. The <defs> Element and Reusable Definitions

The <defs> element contains definitions that are not rendered directly but can be referenced by other elements. Always put gradients, filters, clip paths, and patterns inside <defs>.

<svg viewBox="0 0 100 100">
  <defs>
    <!-- Definitions go here — not rendered directly -->
    <linearGradient id="myGrad">...</linearGradient>
    <filter id="myFilter">...</filter>
    <clipPath id="myClip">...</clipPath>
  </defs>

  <!-- Elements that use the definitions -->
  <rect fill="url(#myGrad)" filter="url(#myFilter)" clip-path="url(#myClip)" ... />
</svg>

6. Gradients

Linear Gradient

Goes in a straight line from one color to another.

<defs>
  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%" stop-color="#34D399" />
    <stop offset="50%" stop-color="#06B6D4" />
    <stop offset="100%" stop-color="#8B5CF6" />
  </linearGradient>
</defs>
<rect fill="url(#grad1)" x="0" y="0" width="100" height="100" />

Direction control via x1/y1/x2/y2:

• x1="0%" x2="100%" y1="0%" y2="0%" — horizontal (left to right) [default]
• x1="0%" x2="0%" y1="0%" y2="100%" — vertical (top to bottom)
• x1="0%" x2="100%" y1="0%" y2="100%" — diagonal (top-left to bottom-right)

Stop attributes:

• offset — position along the gradient (0% to 100%)
• stop-color — color at this stop
• stop-opacity — opacity at this stop (0 to 1)

Radial Gradient

Radiates outward from a center point.

<defs>
  <radialGradient id="grad2" cx="50%" cy="50%" r="50%">
    <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.8" />
    <stop offset="100%" stop-color="#34D399" stop-opacity="0" />
  </radialGradient>
</defs>
<circle fill="url(#grad2)" cx="50" cy="50" r="40" />

Attributes:

• cx, cy — center of the gradient
• r — radius
• fx, fy — focal point (where the gradient appears to originate from, defaults to cx/cy)

7. Filters

SVG filters apply visual effects (blur, shadow, glow, etc.). Defined in <defs>, referenced via filter="url(#id)".

Gaussian Blur

<defs>
  <filter id="blur1">
    <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
  </filter>
</defs>
<circle filter="url(#blur1)" cx="50" cy="50" r="30" fill="#34D399" />

Drop Shadow

<defs>
  <filter id="shadow1" x="-20%" y="-20%" width="140%" height="140%">
    <feDropShadow dx="2" dy="4" stdDeviation="3" flood-color="#000000" flood-opacity="0.3" />
  </filter>
</defs>

Glow Effect

<defs>
  <filter id="glow1" x="-50%" y="-50%" width="200%" height="200%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur" />
    <feMerge>
      <feMergeNode in="blur" />
      <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>
</defs>

Common Filter Primitives

Tip: Expand the x, y, width, height attributes on <filter> to prevent clipping of effects that extend beyond the element bounds (blur, glow, shadow).

8. Transforms

Apply geometric transformations to elements or groups.

<rect transform="translate(10, 20) rotate(45, 50, 50) scale(1.5)" ... />

Transform Functions

Important: rotate(45) rotates around the SVG origin (0,0), not the element center. To rotate around the element’s center, use rotate(45, cx, cy) where cx/cy is the center of the element.

9. Grouping and Organization

<g> — Group Element

Groups elements together. Transforms and styles applied to <g> affect all children.

<g transform="translate(50, 50)" opacity="0.8">
  <circle cx="0" cy="0" r="20" fill="#34D399" />
  <circle cx="30" cy="0" r="15" fill="#06B6D4" />
</g>

<use> — Reuse Elements

Reference a defined element multiple times:

<defs>
  <circle id="dot" r="5" fill="#34D399" />
</defs>
<use href="#dot" x="20" y="20" />
<use href="#dot" x="50" y="50" />
<use href="#dot" x="80" y="80" />

<clipPath> — Clip to a Shape

<defs>
  <clipPath id="circleClip">
    <circle cx="50" cy="50" r="40" />
  </clipPath>
</defs>
<rect clip-path="url(#circleClip)" x="0" y="0" width="100" height="100" fill="#4F46E5" />

<mask> — Soft Masking with Opacity

<defs>
  <mask id="fadeMask">
    <rect x="0" y="0" width="100" height="100" fill="white" />
    <circle cx="50" cy="50" r="30" fill="black" />
  </mask>
</defs>
<rect mask="url(#fadeMask)" x="0" y="0" width="100" height="100" fill="#34D399" />

White areas in the mask are visible, black areas are hidden, gray values create partial transparency.

10. Accessibility

Always add accessibility attributes to meaningful SVGs:

<svg role="img" aria-labelledby="title desc" viewBox="0 0 100 100">
  <title id="title">Icon Name</title>
  <desc id="desc">A brief description of what this SVG depicts</desc>
  <!-- content -->
</svg>

For decorative SVGs (not conveying information):

<svg aria-hidden="true" viewBox="0 0 100 100">
  <!-- decorative content -->
</svg>

11. CSS Styling in SVG

SVG attributes can be set via CSS. Use <style> inside the SVG or external stylesheets:

<svg viewBox="0 0 100 100">
  <style>
    .node { fill: #34D399; transition: r 300ms ease; }
    .node:hover { r: 15; fill: #06B6D4; }
    .link { stroke: #34D399; stroke-width: 2; opacity: 0.6; }
  </style>
  <line class="link" x1="20" y1="20" x2="80" y2="80" />
  <circle class="node" cx="20" cy="20" r="10" />
  <circle class="node" cx="80" cy="80" r="10" />
</svg>

CSS-animatable SVG properties: fill, stroke, stroke-width, stroke-dasharray, stroke-dashoffset, opacity, r, cx, cy, x, y, width, height.

CSS Animations for SVG

Dash animation (self-drawing effect):

<style>
  @keyframes draw {
    from { stroke-dashoffset: 763; }
    to { stroke-dashoffset: 0; }
  }
  .draw-path {
    stroke-dasharray: 763;
    stroke-dashoffset: 763;
    animation: draw 2s ease forwards;
  }
</style>

Spinner:

<style>
  @keyframes spin { to { transform: rotate(360deg); } }
  .spinner { animation: spin 1s linear infinite; transform-origin: center; }
</style>

12. Favicon & Icon Best Practices

Favicon Requirements

Standard .ico contains multiple sizes: 16×16, 32×32, 48×48, 256×256.

Modern browsers also accept SVG favicons:

<link rel="icon" type="image/svg+xml" href="/icon.svg" />

Design Rules for Small Sizes

1. Simplicity is king — At 16×16, fine details vanish. Use bold, simple shapes.
2. Max 2-3 visual elements — One primary shape + one accent.
3. Strong silhouette — The icon should be recognizable as a solid silhouette.
4. High contrast — Ensure strong contrast between foreground and background.
5. Thick strokes — Minimum stroke-width of 2-3 in a 32×32 viewBox.
6. No text — Letters are illegible at 16px (a single symbol like Σ is OK).
7. Test at actual size — View your SVG at 16×16 and 32×32 pixels before finalizing.

Icon Template

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <defs>
    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#1E1B4B" />
      <stop offset="100%" stop-color="#312E81" />
    </linearGradient>
  </defs>

  <!-- Background with rounded corners -->
  <rect width="32" height="32" rx="7" fill="url(#bg)" />

  <!-- Main symbol here -->
</svg>

13. Optimization Checklist

Before delivering an SVG:

• Has viewBox — Always present for scalability
• No unnecessary attributes — Remove defaults (fill-rule="nonzero", stroke="none" when no stroke)
• Grouped logically — Use <g> with meaningful structure
• Gradients/filters in <defs> — Never define them inline
• Unique IDs — All id attributes must be unique within the document (critical when multiple SVGs are on the same page)
• Minimal decimal precision — Round to 1-2 decimal places (50.5, not 50.123456)
• Readable formatting — Use commas and newlines for complex points and d attributes
• Accessible — role="img" + <title> for meaningful SVGs, aria-hidden="true" for decorative ones
• No invisible elements — Remove shapes with opacity="0" or outside the viewBox
• Colors use consistent format — Pick one format (hex, oklch, hsl) and use it throughout

14. Common Patterns & Recipes

Rounded Square Background (for icons)

<rect width="100" height="100" rx="22" fill="#1E1B4B" />

Glowing Node (AI/tech aesthetic)

<circle cx="50" cy="50" r="8" fill="#34D399" opacity="0.2" />
<circle cx="50" cy="50" r="4" fill="#34D399" />

Neural Network Connection

<line x1="20" y1="20" x2="80" y2="80" stroke="#06B6D4" stroke-width="2" opacity="0.6" />
<circle cx="20" cy="20" r="5" fill="#34D399" />
<circle cx="80" cy="80" r="5" fill="#06B6D4" />

Circuit Trace

<line x1="60" y1="30" x2="85" y2="30" stroke="#06B6D4" stroke-width="2" opacity="0.7" />
<circle cx="85" cy="30" r="4" fill="#06B6D4" opacity="0.8" />

Gradient Text (via clip-path)

<defs>
  <linearGradient id="textGrad" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#65F2BE" />
    <stop offset="50%" stop-color="#35C9FF" />
    <stop offset="100%" stop-color="#9EFF8F" />
  </linearGradient>
</defs>
<text fill="url(#textGrad)" font-size="24" font-weight="bold" x="50" y="55" text-anchor="middle">
  TexAI
</text>

Star / Sparkle (4-pointed)

<path d="M 50 35 L 53 47 L 65 50 L 53 53 L 50 65 L 47 53 L 35 50 L 47 47 Z" fill="#FFFFFF" />

Hexagon

<polygon points="50,5 95,27.5 95,72.5 50,95 5,72.5 5,27.5" fill="#4F46E5" />

15. Workflow for Creating SVGs

Step 1: Define the Canvas

Choose a viewBox appropriate for the use case:

• Icons: 0 0 24 24 or 0 0 32 32
• Logos: 0 0 200 60 (horizontal) or 0 0 100 100 (square)
• Illustrations: 0 0 400 300 or whatever fits the content

Step 2: Sketch the Composition

Plan which elements go where. Think in terms of:

• Background shape (rounded rect, circle)
• Primary element (the main symbol)
• Secondary elements (accents, decorations)

Step 3: Build Layer by Layer

SVG renders in document order — later elements render on top of earlier ones:

<svg viewBox="0 0 100 100">
  <!-- Layer 1: Background (renders first, at the back) -->
  <rect width="100" height="100" rx="20" fill="#1E1B4B" />

  <!-- Layer 2: Main symbol (renders on top of background) -->
  <path d="..." fill="#34D399" />

  <!-- Layer 3: Accents (renders on top of everything) -->
  <circle cx="75" cy="25" r="5" fill="#06B6D4" />
</svg>

Step 4: Add Polish

• Gradients for depth
• Opacity variations for hierarchy
• Subtle glow filters for premium feel
• Consistent stroke-width across all strokes

Step 5: Test and Optimize

• View at target sizes (16px, 32px, 64px for favicons)
• Check on both light and dark backgrounds
• Validate that all IDs are unique
• Remove unnecessary attributes

Sources

Knowledge synthesized from:

• Josh W Comeau — A Friendly Introduction to SVG
• W3Schools — SVG Tutorial (paths, gradients, strokes, filters, transforms)
• MDN Web Docs — SVG Reference