SVG Stroke Properties

The stroke attribute series is used to control SVG shape stroke styles, including color, width, line type, etc.

Basic Stroke Properties

Attribute	Description
`stroke`	Stroke color
`stroke-width`	Stroke width
`stroke-opacity`	Stroke opacity
`stroke-linecap`	Line endpoint style
`stroke-linejoin`	Line join style
`stroke-dasharray`	Dash pattern
`stroke-dashoffset`	Dash start offset
`stroke-miterlimit`	Miter limit

stroke (Stroke Color)

<svg width="400" height="100">
  <!-- Different colors -->
  <line x1="20" y1="30" x2="120" y2="30" stroke="#3b82f6" stroke-width="4"/>
  <line x1="20" y1="50" x2="120" y2="50" stroke="rgb(239, 68, 68)" stroke-width="4"/>
  <line x1="20" y1="70" x2="120" y2="70" stroke="hsl(142, 71%, 45%)" stroke-width="4"/>

  <!-- Color names -->
  <circle cx="180" cy="50" r="30" fill="none" stroke="coral" stroke-width="4"/>
  <circle cx="260" cy="50" r="30" fill="none" stroke="steelblue" stroke-width="4"/>
  <circle cx="340" cy="50" r="30" fill="none" stroke="mediumpurple" stroke-width="4"/>
</svg>

stroke-width (Stroke Width)

<svg width="400" height="120">
  <line x1="20" y1="20" x2="380" y2="20" stroke="#3b82f6" stroke-width="1"/>
  <line x1="20" y1="40" x2="380" y2="40" stroke="#3b82f6" stroke-width="3"/>
  <line x1="20" y1="65" x2="380" y2="65" stroke="#3b82f6" stroke-width="6"/>
  <line x1="20" y1="95" x2="380" y2="95" stroke="#3b82f6" stroke-width="10"/>
</svg>

stroke-opacity (Stroke Opacity)

<svg width="400" height="100">
  <circle cx="60" cy="50" r="40" fill="none" stroke="#3b82f6" stroke-width="8" stroke-opacity="1"/>
  <circle cx="160" cy="50" r="40" fill="none" stroke="#3b82f6" stroke-width="8" stroke-opacity="0.7"/>
  <circle cx="260" cy="50" r="40" fill="none" stroke="#3b82f6" stroke-width="8" stroke-opacity="0.4"/>
  <circle cx="360" cy="50" r="40" fill="none" stroke="#3b82f6" stroke-width="8" stroke-opacity="0.2"/>
</svg>

stroke-linecap (Endpoint Style)

Controls line endpoint shape:

<svg width="400" height="150">
  <!-- butt (default): flat endpoint -->
  <line x1="50" y1="40" x2="150" y2="40" stroke="#3b82f6" stroke-width="20" stroke-linecap="butt"/>
  <text x="200" y="45" font-size="14" fill="#1f2937">butt (default) - flat endpoint</text>

  <!-- round: rounded endpoint -->
  <line x1="50" y1="80" x2="150" y2="80" stroke="#22c55e" stroke-width="20" stroke-linecap="round"/>
  <text x="200" y="85" font-size="14" fill="#1f2937">round - rounded endpoint</text>

  <!-- square: square endpoint -->
  <line x1="50" y1="120" x2="150" y2="120" stroke="#ef4444" stroke-width="20" stroke-linecap="square"/>
  <text x="200" y="125" font-size="14" fill="#1f2937">square - square endpoint</text>

  <!-- Reference lines -->
  <line x1="50" y1="20" x2="50" y2="140" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="3"/>
  <line x1="150" y1="20" x2="150" y2="140" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="3"/>
</svg>

stroke-linejoin (Join Style)

Controls line corner shape:

<svg width="400" height="180">
  <!-- miter: sharp corner (default) -->
  <polyline points="30,50 80,10 130,50" fill="none" stroke="#3b82f6" stroke-width="15" stroke-linejoin="miter"/>
  <text x="150" y="35" font-size="14" fill="#1f2937">miter - sharp corner</text>

  <!-- round: rounded corner -->
  <polyline points="30,100 80,60 130,100" fill="none" stroke="#22c55e" stroke-width="15" stroke-linejoin="round"/>
  <text x="150" y="85" font-size="14" fill="#1f2937">round - rounded corner</text>

  <!-- bevel: beveled corner -->
  <polyline points="30,150 80,110 130,150" fill="none" stroke="#ef4444" stroke-width="15" stroke-linejoin="bevel"/>
  <text x="150" y="135" font-size="14" fill="#1f2937">bevel - beveled corner</text>
</svg>

stroke-dasharray (Dash Pattern)

Defines dash and gap pattern:

<svg width="400" height="200">
  <!-- Equal spaced dash -->
  <line x1="20" y1="20" x2="380" y2="20" stroke="#3b82f6" stroke-width="3" stroke-dasharray="10"/>
  <text x="20" y="40" font-size="12" fill="#6b7280">dasharray="10"</text>

  <!-- Long and short alternating -->
  <line x1="20" y1="60" x2="380" y2="60" stroke="#22c55e" stroke-width="3" stroke-dasharray="20,5"/>
  <text x="20" y="80" font-size="12" fill="#6b7280">dasharray="20,5"</text>

  <!-- Dotted line -->
  <line x1="20" y1="100" x2="380" y2="100" stroke="#ef4444" stroke-width="3" stroke-dasharray="2,8"/>
  <text x="20" y="120" font-size="12" fill="#6b7280">dasharray="2,8"</text>

  <!-- Complex pattern -->
  <line x1="20" y1="140" x2="380" y2="140" stroke="#8b5cf6" stroke-width="3" stroke-dasharray="15,5,5,5"/>
  <text x="20" y="160" font-size="12" fill="#6b7280">dasharray="15,5,5,5"</text>

  <!-- Dash-dot line -->
  <line x1="20" y1="180" x2="380" y2="180" stroke="#f59e0b" stroke-width="3" stroke-dasharray="20,5,5,5,5,5"/>
  <text x="20" y="200" font-size="12" fill="#6b7280">dasharray="20,5,5,5,5,5"</text>
</svg>

stroke-dashoffset (Dash Offset)

Controls dash pattern start position:

<svg width="400" height="150">
  <line x1="20" y1="30" x2="380" y2="30" stroke="#3b82f6" stroke-width="3" stroke-dasharray="20,5" stroke-dashoffset="0"/>
  <text x="20" y="50" font-size="12" fill="#6b7280">offset="0"</text>

  <line x1="20" y1="70" x2="380" y2="70" stroke="#3b82f6" stroke-width="3" stroke-dasharray="20,5" stroke-dashoffset="10"/>
  <text x="20" y="90" font-size="12" fill="#6b7280">offset="10"</text>

  <line x1="20" y1="110" x2="380" y2="110" stroke="#3b82f6" stroke-width="3" stroke-dasharray="20,5" stroke-dashoffset="25"/>
  <text x="20" y="130" font-size="12" fill="#6b7280">offset="25"</text>
</svg>

Line Drawing Animation

Use stroke-dasharray and stroke-dashoffset to create drawing animation:

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

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

Circular Progress Animation

<style>
  .progress-ring {
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    animation: progress 2s ease forwards;
    transform-origin: center;
    transform: rotate(-90deg);
  }
  @keyframes progress {
    to { stroke-dashoffset: 70; }  /* 75% progress */
  }
</style>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="45" fill="none" stroke="#e5e7eb" stroke-width="8"/>
  <circle class="progress-ring" cx="50" cy="50" r="45" fill="none" stroke="#3b82f6" stroke-width="8"/>
</svg>

stroke-miterlimit

Controls maximum length of miter joins:

<svg width="400" height="150">
  <!-- Default miterlimit=4 -->
  <polyline points="30,80 80,20 130,80" fill="none" stroke="#3b82f6" stroke-width="15"
            stroke-linejoin="miter" stroke-miterlimit="4"/>
  <text x="30" y="110" font-size="12" fill="#6b7280">miterlimit="4"</text>

  <!-- Smaller miterlimit -->
  <polyline points="180,80 230,20 280,80" fill="none" stroke="#22c55e" stroke-width="15"
            stroke-linejoin="miter" stroke-miterlimit="2"/>
  <text x="180" y="110" font-size="12" fill="#6b7280">miterlimit="2"</text>

  <!-- Larger miterlimit -->
  <polyline points="330,80 380,20 430,80" fill="none" stroke="#ef4444" stroke-width="15"
            stroke-linejoin="miter" stroke-miterlimit="8"/>
  <text x="330" y="110" font-size="12" fill="#6b7280">miterlimit="8"</text>
</svg>

Practical Application Examples

Loading Animation

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

<svg width="60" height="60" viewBox="0 0 60 60">
  <circle class="loader" cx="30" cy="30" r="25" fill="none"
          stroke="#3b82f6" stroke-width="5"
          stroke-dasharray="100" stroke-dashoffset="25"
          stroke-linecap="round"/>
</svg>

Handwritten Signature Effect

<style>
  .signature {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: sign 3s ease forwards;
  }
  @keyframes sign {
    to { stroke-dashoffset: 0; }
  }
</style>

<svg width="300" height="100">
  <path class="signature"
        d="M20,60 Q40,20 60,60 T100,60 T140,60 L160,40 L180,70 Q200,90 220,50 L250,50"
        fill="none" stroke="#1f2937" stroke-width="2" stroke-linecap="round"/>
</svg>

Border Styles

<svg width="300" height="200">
  <!-- Solid border -->
  <rect x="10" y="10" width="130" height="80" rx="8"
        fill="white" stroke="#3b82f6" stroke-width="2"/>

  <!-- Dashed border -->
  <rect x="160" y="10" width="130" height="80" rx="8"
        fill="white" stroke="#22c55e" stroke-width="2" stroke-dasharray="8,4"/>

  <!-- Dotted border -->
  <rect x="10" y="110" width="130" height="80" rx="8"
        fill="white" stroke="#ef4444" stroke-width="2" stroke-dasharray="4,4"/>

  <!-- Two-color border effect -->
  <rect x="160" y="110" width="130" height="80" rx="8"
        fill="white" stroke="#8b5cf6" stroke-width="4"/>
  <rect x="160" y="110" width="130" height="80" rx="8"
        fill="none" stroke="white" stroke-width="4" stroke-dasharray="10,10"/>
</svg>

Icon Stroke

<svg width="200" height="50">
  <!-- Heart icon -->
  <path d="M25,15 C25,10 20,5 12.5,5 C5,5 0,12.5 0,20 C0,30 25,45 25,45 C25,45 50,30 50,20 C50,12.5 45,5 37.5,5 C30,5 25,10 25,15 Z"
        fill="none" stroke="#ef4444" stroke-width="2" stroke-linejoin="round"
        transform="translate(10,0)"/>

  <!-- Star icon -->
  <polygon points="100,5 105,20 120,20 108,28 113,45 100,35 87,45 92,28 80,20 95,20"
           fill="none" stroke="#f59e0b" stroke-width="2" stroke-linejoin="round"
           transform="translate(30,0)"/>
</svg>

Next Steps

Now that you've mastered stroke properties, let's learn about SVG Filters Introduction!

#SVG Stroke Properties

#Basic Stroke Properties

#stroke (Stroke Color)

#stroke-width (Stroke Width)

#stroke-opacity (Stroke Opacity)

#stroke-linecap (Endpoint Style)

#stroke-linejoin (Join Style)

#stroke-dasharray (Dash Pattern)

#stroke-dashoffset (Dash Offset)

#Line Drawing Animation

#Circular Progress Animation

#stroke-miterlimit

#Practical Application Examples

#Loading Animation

#Handwritten Signature Effect

#Border Styles

#Icon Stroke

#Next Steps