SVG Path

The <path> is the most powerful element in SVG, capable of drawing any shape including straight lines, curves, arcs, etc.

Basic Syntax

<svg width="200" height="100">
  <path d="M10,50 L100,50 L100,90" fill="none" stroke="#3b82f6" stroke-width="2"/>
</svg>

Main Properties

Property	Description
d	Path data, defines drawing commands
fill	Fill color
stroke	Stroke color
stroke-width	Stroke width

Path Commands

Basic Commands

Command	Name	Parameters	Description
M	moveto	x,y	Move to specified point (start point)
L	lineto	x,y	Draw line to specified point
H	horizontal lineto	x	Draw horizontal line
V	vertical lineto	y	Draw vertical line
Z	closepath	none	Close path

Uppercase vs Lowercase

• Uppercase letters: use absolute coordinates
• Lowercase letters: use relative coordinates (relative to current point)

Line Examples

<svg width="300" height="150">
  <!-- Using M and L -->
  <path d="M20,20 L100,20 L100,100 L20,100 Z"
        fill="#bfdbfe" stroke="#3b82f6" stroke-width="2"/>

  <!-- Using H and V -->
  <path d="M140,20 H220 V100 H140 Z"
        fill="#bbf7d0" stroke="#22c55e" stroke-width="2"/>

  <!-- Using relative coordinates -->
  <path d="M260,20 l80,0 l0,80 l-80,0 z"
        fill="#fecaca" stroke="#ef4444" stroke-width="2"/>
</svg>

Curve Commands

Bezier Curves

Command	Name	Parameters	Description
C	curveto	x1,y1 x2,y2 x,y	Cubic Bezier curve
S	smooth curveto	x2,y2 x,y	Smooth cubic Bezier curve
Q	quadratic curveto	x1,y1 x,y	Quadratic Bezier curve
T	smooth quadratic	x,y	Smooth quadratic Bezier curve
A	arc	rx,ry rot large sweep x,y	Elliptical arc

Cubic Bezier Curve (C)

<svg width="300" height="150">
  <!-- C x1,y1 x2,y2 x,y -->
  <path d="M20,100 C20,20 150,20 150,100"
        fill="none" stroke="#3b82f6" stroke-width="3"/>

  <!-- Show control points -->
  <circle cx="20" cy="100" r="4" fill="#ef4444"/>
  <circle cx="20" cy="20" r="4" fill="#22c55e"/>
  <circle cx="150" cy="20" r="4" fill="#22c55e"/>
  <circle cx="150" cy="100" r="4" fill="#ef4444"/>
  <line x1="20" y1="100" x2="20" y2="20" stroke="#ccc" stroke-dasharray="3"/>
  <line x1="150" y1="100" x2="150" y2="20" stroke="#ccc" stroke-dasharray="3"/>
</svg>

Quadratic Bezier Curve (Q)

<svg width="300" height="150">
  <!-- Q x1,y1 x,y -->
  <path d="M20,100 Q100,20 180,100"
        fill="none" stroke="#8b5cf6" stroke-width="3"/>

  <!-- Control points -->
  <circle cx="20" cy="100" r="4" fill="#ef4444"/>
  <circle cx="100" cy="20" r="4" fill="#22c55e"/>
  <circle cx="180" cy="100" r="4" fill="#ef4444"/>
  <line x1="20" y1="100" x2="100" y2="20" stroke="#ccc" stroke-dasharray="3"/>
  <line x1="100" y1="20" x2="180" y2="100" stroke="#ccc" stroke-dasharray="3"/>
</svg>

Arc Commands

Command	Parameters	Description
A	rx,ry rotation large-arc sweep x,y	Draw arc

Parameter descriptions:

• rx, ry: Ellipse x and y radii
• rotation: Ellipse rotation angle
• large-arc: 0=small arc, 1=large arc
• sweep: 0=counterclockwise, 1=clockwise
• x, y: End point coordinates

<svg width="400" height="200">
  <!-- Small arc + clockwise -->
  <path d="M50,100 A50,50 0 0,1 150,100"
        fill="none" stroke="#3b82f6" stroke-width="3"/>
  <text x="100" y="130" text-anchor="middle" font-size="11">0,1</text>

  <!-- Large arc + clockwise -->
  <path d="M200,100 A50,50 0 1,1 300,100"
        fill="none" stroke="#22c55e" stroke-width="3"/>
  <text x="250" y="130" text-anchor="middle" font-size="11">1,1</text>

  <!-- Small arc + counterclockwise -->
  <path d="M50,180 A50,50 0 0,0 150,180"
        fill="none" stroke="#f59e0b" stroke-width="3"/>
  <text x="100" y="210" text-anchor="middle" font-size="11">0,0</text>

  <!-- Large arc + counterclockwise -->
  <path d="M200,180 A50,50 0 1,0 300,180"
        fill="none" stroke="#ef4444" stroke-width="3"/>
  <text x="250" y="210" text-anchor="middle" font-size="11">1,0</text>
</svg>

Using CSS Styling

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

<svg width="200" height="100">
  <path class="path-draw" d="M20,80 Q100,10 180,80"
        fill="none" stroke="#3b82f6" stroke-width="3"/>
</svg>

Practical Application Examples

Heart Shape

<svg width="100" height="100" viewBox="0 0 100 100">
  <path d="M50,30 C50,20 40,10 25,10 C10,10 0,25 0,40 C0,60 50,90 50,90 C50,90 100,60 100,40 C100,25 90,10 75,10 C60,10 50,20 50,30 Z"
        fill="#ef4444"/>
</svg>

Wave Line

<svg width="400" height="80">
  <path d="M0,40 Q25,10 50,40 T100,40 T150,40 T200,40 T250,40 T300,40 T350,40 T400,40"
        fill="none" stroke="#3b82f6" stroke-width="3"/>
</svg>

Rounded Rectangle (Custom Corners)

<svg width="200" height="100">
  <path d="M30,10 H170 Q190,10 190,30 V70 Q190,90 170,90 H30 Q10,90 10,70 V30 Q10,10 30,10 Z"
        fill="#3b82f6"/>
</svg>

Speech Bubble

<svg width="200" height="150">
  <path d="M20,20 H160 Q180,20 180,40 V80 Q180,100 160,100 H60 L40,130 L50,100 H20 Q0,100 0,80 V40 Q0,20 20,20 Z"
        fill="#e5e7eb" stroke="#9ca3af" stroke-width="2"/>
</svg>

Pie Chart Segment

<svg width="200" height="200" viewBox="0 0 200 200">
  <!-- First segment (40%) -->
  <path d="M100,100 L100,20 A80,80 0 0,1 176,140 Z" fill="#3b82f6"/>
  <!-- Second segment (35%) -->
  <path d="M100,100 L176,140 A80,80 0 0,1 24,140 Z" fill="#22c55e"/>
  <!-- Third segment (25%) -->
  <path d="M100,100 L24,140 A80,80 0 0,1 100,20 Z" fill="#f59e0b"/>
</svg>

Complex Icon - House

<svg width="100" height="100" viewBox="0 0 100 100">
  <!-- Roof -->
  <path d="M50,10 L90,45 L10,45 Z" fill="#ef4444"/>
  <!-- House body -->
  <path d="M20,45 L20,85 L80,85 L80,45" fill="#f59e0b"/>
  <!-- Door -->
  <path d="M40,85 L40,60 L60,60 L60,85" fill="#78350f"/>
  <!-- Windows -->
  <path d="M25,55 L25,70 L35,70 L35,55 Z" fill="#bfdbfe"/>
  <path d="M65,55 L65,70 L75,70 L75,55 Z" fill="#bfdbfe"/>
</svg>

Checkmark Animation

<style>
  .check-path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: drawCheck 0.5s ease forwards;
  }
  @keyframes drawCheck {
    to { stroke-dashoffset: 0; }
  }
</style>

<svg width="60" height="60">
  <circle cx="30" cy="30" r="28" fill="#22c55e"/>
  <path class="check-path" d="M15,30 L25,40 L45,20"
        fill="none" stroke="white" stroke-width="4"
        stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Next Steps

Now that you've learned paths, let's learn about SVG Text!