SVG Stroke

Posted in SVG Tutorial

Updated on May 18, 2024

By Mari Selvan

👁️ 116 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

In SVG (Scalable Vector Graphics), the stroke attribute is used to define the color, width, and other properties of the outline of shapes and paths. Understanding how to utilize the stroke attribute is crucial for creating detailed and visually appealing graphics.

This guide will walk you through the syntax, attributes, examples, and provide a conclusion to summarize the key points.

💡 Syntax

The stroke attribute can be applied to any SVG shape or path element, such as <rect>, <circle>, <line>, <polygon>, and <path>. Here’s a basic example of the syntax:

Syntax

Copied

<element stroke="color" stroke-width="width" stroke-linecap="type" stroke-linejoin="type" />

🧰 Attributes

stroke: Defines the color of the stroke. This can be any valid color value (e.g., red, #FF0000, rgb(255,0,0)).
stroke-width: Sets the width of the stroke. The value can be in any valid length unit (e.g., 2, 5px, 1em).
stroke-linecap: Determines the shape of the ends of the stroke. Possible values are butt, round, and square.
- butt: Default value. The stroke ends are flat and square with the endpoint.
- round: The stroke ends are rounded.
- square: The stroke ends extend beyond the endpoint by half the stroke-width.
stroke-linejoin: Specifies the shape of the corner where two lines meet. Possible values are miter, round, and bevel.
- miter: Default value. Sharp corners.
- round: Rounded corners.
- bevel: Flattened corners.

📄 Example

Let's create an SVG graphic to demonstrate the stroke attribute:

index.html

Copied

<svg width="200" height="200">
  <!-- Rectangle with a red stroke, 4px wide -->
  <rect x="50" y="50" width="100" height="80" fill="none" stroke="red" stroke-width="4" />
  
  <!-- Circle with a blue stroke, 2px wide, rounded linecap -->
  <circle cx="100" cy="100" r="40" fill="none" stroke="blue" stroke-width="2" stroke-linecap="round" />
  
  <!-- Line with a green stroke, 5px wide, beveled linejoin -->
  <line x1="0" y1="0" x2="200" y2="200" stroke="green" stroke-width="5" stroke-linejoin="bevel" />
</svg>

🧠 How it works?

In this example:

The rectangle has a red stroke with a width of 4 pixels.
The circle has a blue stroke with a width of 2 pixels and rounded ends.
The line has a green stroke with a width of 5 pixels and beveled corners.

🎉 Conclusion

The stroke attribute in SVG provides powerful control over the appearance of shape outlines, allowing for customization in color, width, and the styling of stroke ends and corners.

By mastering the use of the stroke attribute and its related properties, you can enhance the visual impact of your SVG graphics and create more engaging designs.