SVG Stroking

SVG Stroke Properties

Understanding SVG Stroke Properties

In SVG, the ‘stroke’ refers to the outline of a shape, line, or text. SVG provides several properties to control the appearance of strokes. This chapter will cover some of the most common ones:

• stroke: Defines the color of the stroke.
• stroke-width: Defines the thickness of the stroke.
• stroke-linecap: Defines the shape of the ends of open paths (lines).
• stroke-dasharray: Creates dashed or dotted lines.

These properties can be applied to any graphical element that has an outline, such as lines, paths, circles, rectangles, polygons, and even text.

The stroke Property

The stroke property defines the color of an element’s outline. You can use named colors, hexadecimal codes, RGB, HSL, or even gradients/patterns.

Sorry, your browser does not support inline SVG.

Here is the SVG code demonstrating different stroke colors:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Stroke Color</title>
</head>
<body>
  <svg width="300" height="80">
    <g fill="none" stroke-width="4">
      <path d="M10 20 L290 20" stroke="red" />
      <path d="M10 40 L290 40" stroke="#0000FF" /> <!-- Blue -->
      <path d="M10 60 L290 60" stroke="rgb(0,128,0)" /> <!-- Green -->
    </g>
  </svg>
</body>
</html>

The stroke-width Property

The stroke-width property defines the thickness of the stroke. The value is typically a number without units, representing pixels in the user coordinate system.

Sorry, your browser does not support inline SVG.

Here is the SVG code demonstrating different stroke widths:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Stroke Width</title>
</head>
<body>
  <svg width="300" height="80">
    <g fill="none" stroke="black">
      <path d="M10 20 L290 20" stroke-width="2" />
      <path d="M10 40 L290 40" stroke-width="4" />
      <path d="M10 60 L290 60" stroke-width="6" />
    </g>
  </svg>
</body>
</html>

The stroke-linecap Property

The stroke-linecap property defines the shape to be used at the ends of open subpaths (like lines or unclosed paths). It has three possible values:

• butt: The stroke is squared off at the endpoint of the path. This is the default.
• round: The stroke is rounded at the endpoint, with the radius of the rounding equal to half the stroke-width.
• square: The stroke is squared off but extends beyond the endpoint of the path by half the stroke-width.

Sorry, your browser does not support inline SVG.

Here is the SVG code demonstrating different line caps:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Stroke Linecap</title>
</head>
<body>
  <svg width="300" height="80">
    <g fill="none" stroke="black" stroke-width="8">
      <path d="M20 20 L280 20" stroke-linecap="butt" />
      <text x="20" y="15" font-size="10">butt</text>
      <path d="M20 40 L280 40" stroke-linecap="round" />
      <text x="20" y="35" font-size="10">round</text>
      <path d="M20 60 L280 60" stroke-linecap="square" />
      <text x="20" y="55" font-size="10">square</text>
    </g>
  </svg>
</body>
</html>

The stroke-dasharray Property

The stroke-dasharray property is used to create dashed lines. It takes a list of comma-separated or space-separated numbers that specify the lengths of dashes and gaps. For example, stroke-dasharray="5,5" creates a line with 5px dashes followed by 5px gaps.

Sorry, your browser does not support inline SVG.

Here is the SVG code demonstrating different dash patterns:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Stroke Dasharray</title>
</head>
<body>
  <svg width="300" height="80">
    <g fill="none" stroke="black" stroke-width="2">
      <path d="M10 20 L290 20" stroke-dasharray="5, 5" />
      <path d="M10 40 L290 40" stroke-dasharray="10, 10" />
      <path d="M10 60 L290 60" stroke-dasharray="20, 10, 5, 5, 5, 10" />
    </g>
  </svg>
</body>
</html>

Tip: You can combine these stroke properties to create a wide variety of outline styles for your SVG graphics. Experiment with different values to see their effects!