SVG Line

The <line> element is used to draw straight lines, the simplest way to connect two points.

Basic Syntax

<svg width="200" height="100">
  <line x1="10" y1="10" x2="190" y2="90" stroke="#3b82f6" stroke-width="2"/>
</svg>

Main Properties

Property	Description
x1	Starting point x coordinate
y1	Starting point y coordinate
x2	Ending point x coordinate
y2	Ending point y coordinate
stroke	Line color
stroke-width	Line width
stroke-linecap	Line endpoint style
stroke-dasharray	Dashed line style

Note

The <line> element must have the stroke attribute set to be visible, because lines have no fill area.

Basic Lines

<svg width="300" height="150">
  <!-- Horizontal line -->
  <line x1="10" y1="30" x2="290" y2="30" stroke="#3b82f6" stroke-width="2"/>

  <!-- Vertical line -->
  <line x1="150" y1="10" x2="150" y2="140" stroke="#22c55e" stroke-width="2"/>

  <!-- Diagonal line -->
  <line x1="10" y1="140" x2="290" y2="10" stroke="#ef4444" stroke-width="2"/>
</svg>

Lines with Different Widths

<svg width="300" height="120">
  <line x1="10" y1="20" x2="290" y2="20" stroke="#3b82f6" stroke-width="1"/>
  <line x1="10" y1="40" x2="290" y2="40" stroke="#3b82f6" stroke-width="2"/>
  <line x1="10" y1="60" x2="290" y2="60" stroke="#3b82f6" stroke-width="4"/>
  <line x1="10" y1="85" x2="290" y2="85" stroke="#3b82f6" stroke-width="8"/>
  <line x1="10" y1="110" x2="290" y2="110" stroke="#3b82f6" stroke-width="12"/>
</svg>

Line Endpoint Styles (stroke-linecap)

<svg width="300" height="150">
  <!-- butt (default): flat endpoint -->
  <line x1="30" y1="30" x2="270" y2="30"
        stroke="#3b82f6" stroke-width="15" stroke-linecap="butt"/>
  <text x="150" y="55" text-anchor="middle" font-size="12">butt (default)</text>

  <!-- round: rounded endpoint -->
  <line x1="30" y1="80" x2="270" y2="80"
        stroke="#22c55e" stroke-width="15" stroke-linecap="round"/>
  <text x="150" y="105" text-anchor="middle" font-size="12">round</text>

  <!-- square: square endpoint -->
  <line x1="30" y1="130" x2="270" y2="130"
        stroke="#ef4444" stroke-width="15" stroke-linecap="square"/>
  <text x="150" y="155" text-anchor="middle" font-size="12">square</text>
</svg>

Dashed Line Styles (stroke-dasharray)

<svg width="300" height="180">
  <!-- Equal spaced dashed -->
  <line x1="10" y1="20" x2="290" y2="20"
        stroke="#3b82f6" stroke-width="2" stroke-dasharray="10"/>
  <text x="10" y="38" font-size="11">dasharray="10"</text>

  <!-- Long and short alternating -->
  <line x1="10" y1="60" x2="290" y2="60"
        stroke="#22c55e" stroke-width="2" stroke-dasharray="20,5"/>
  <text x="10" y="78" font-size="11">dasharray="20,5"</text>

  <!-- Dotted line -->
  <line x1="10" y1="100" x2="290" y2="100"
        stroke="#ef4444" stroke-width="2" stroke-dasharray="2,4"/>
  <text x="10" y="118" font-size="11">dasharray="2,4"</text>

  <!-- Complex pattern -->
  <line x1="10" y1="140" x2="290" y2="140"
        stroke="#8b5cf6" stroke-width="2" stroke-dasharray="15,5,5,5"/>
  <text x="10" y="158" font-size="11">dasharray="15,5,5,5"</text>
</svg>

Line Transparency

<svg width="200" height="100">
  <line x1="10" y1="20" x2="190" y2="20" stroke="#3b82f6" stroke-width="8" opacity="1"/>
  <line x1="10" y1="40" x2="190" y2="40" stroke="#3b82f6" stroke-width="8" opacity="0.7"/>
  <line x1="10" y1="60" x2="190" y2="60" stroke="#3b82f6" stroke-width="8" opacity="0.4"/>
  <line x1="10" y1="80" x2="190" y2="80" stroke="#3b82f6" stroke-width="8" opacity="0.2"/>
</svg>

Using CSS Styling

<style>
  .animated-line {
    stroke: #3b82f6;
    stroke-width: 3;
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: draw 2s ease forwards;
  }
  @keyframes draw {
    to {
      stroke-dashoffset: 0;
    }
  }
</style>

<svg width="300" height="50">
  <line class="animated-line" x1="10" y1="25" x2="290" y2="25"/>
</svg>

Line Animation

<svg width="300" height="100">
  <!-- Moving line -->
  <line x1="10" y1="30" x2="100" y2="30" stroke="#3b82f6" stroke-width="3">
    <animate attributeName="x2" values="100;290;100" dur="2s" repeatCount="indefinite"/>
  </line>

  <!-- Dashed line animation -->
  <line x1="10" y1="70" x2="290" y2="70"
        stroke="#22c55e" stroke-width="3" stroke-dasharray="20,10">
    <animate attributeName="stroke-dashoffset" from="0" to="30" dur="0.5s" repeatCount="indefinite"/>
  </line>
</svg>

Practical Application Examples

Crosshair

<svg width="100" height="100">
  <!-- Horizontal lines -->
  <line x1="0" y1="50" x2="40" y2="50" stroke="#ef4444" stroke-width="2"/>
  <line x1="60" y1="50" x2="100" y2="50" stroke="#ef4444" stroke-width="2"/>
  <!-- Vertical lines -->
  <line x1="50" y1="0" x2="50" y2="40" stroke="#ef4444" stroke-width="2"/>
  <line x1="50" y1="60" x2="50" y2="100" stroke="#ef4444" stroke-width="2"/>
  <!-- Center circle -->
  <circle cx="50" cy="50" r="5" fill="none" stroke="#ef4444" stroke-width="2"/>
</svg>

Divider Line

<svg width="300" height="40">
  <!-- Gradient divider effect -->
  <defs>
    <linearGradient id="lineGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#e5e7eb"/>
      <stop offset="50%" style="stop-color:#9ca3af"/>
      <stop offset="100%" style="stop-color:#e5e7eb"/>
    </linearGradient>
  </defs>
  <line x1="10" y1="20" x2="290" y2="20" stroke="url(#lineGrad)" stroke-width="2"/>
</svg>

Coordinate Axes

<svg width="250" height="200">
  <!-- Y axis -->
  <line x1="40" y1="20" x2="40" y2="180" stroke="#1f2937" stroke-width="2"/>
  <!-- X axis -->
  <line x1="40" y1="180" x2="230" y2="180" stroke="#1f2937" stroke-width="2"/>
  <!-- Y axis arrow -->
  <line x1="35" y1="30" x2="40" y2="20" stroke="#1f2937" stroke-width="2"/>
  <line x1="45" y1="30" x2="40" y2="20" stroke="#1f2937" stroke-width="2"/>
  <!-- X axis arrow -->
  <line x1="220" y1="175" x2="230" y2="180" stroke="#1f2937" stroke-width="2"/>
  <line x1="220" y1="185" x2="230" y2="180" stroke="#1f2937" stroke-width="2"/>
  <!-- Grid lines -->
  <line x1="40" y1="100" x2="230" y2="100" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="5,3"/>
  <line x1="130" y1="20" x2="130" y2="180" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="5,3"/>
</svg>

Close Button (X)

<svg width="40" height="40">
  <line x1="10" y1="10" x2="30" y2="30" stroke="#6b7280" stroke-width="3" stroke-linecap="round"/>
  <line x1="30" y1="10" x2="10" y2="30" stroke="#6b7280" stroke-width="3" stroke-linecap="round"/>
</svg>

Menu Icon (Hamburger)

<svg width="40" height="40">
  <line x1="8" y1="12" x2="32" y2="12" stroke="#1f2937" stroke-width="3" stroke-linecap="round"/>
  <line x1="8" y1="20" x2="32" y2="20" stroke="#1f2937" stroke-width="3" stroke-linecap="round"/>
  <line x1="8" y1="28" x2="32" y2="28" stroke="#1f2937" stroke-width="3" stroke-linecap="round"/>
</svg>

Next Steps

Now that you've learned lines, let's learn about SVG Polygon!