Kenhuang Academy
  • English

      • 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

      PropertyDescription
      dPath data, defines drawing commands
      fillFill color
      strokeStroke color
      stroke-widthStroke width

      Path Commands

      Basic Commands

      CommandNameParametersDescription
      Mmovetox,yMove to specified point (start point)
      Llinetox,yDraw line to specified point
      Hhorizontal linetoxDraw horizontal line
      Vvertical linetoyDraw vertical line
      ZclosepathnoneClose path

      ::: tip 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

      CommandNameParametersDescription
      Ccurvetox1,y1 x2,y2 x,yCubic Bezier curve
      Ssmooth curvetox2,y2 x,ySmooth cubic Bezier curve
      Qquadratic curvetox1,y1 x,yQuadratic Bezier curve
      Tsmooth quadraticx,ySmooth quadratic Bezier curve
      Aarcrx,ry rot large sweep x,yElliptical 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

      CommandParametersDescription
      Arx,ry rotation large-arc sweep x,yDraw 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!