Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

SVG Stroke

Posted in SVG Tutorial
Updated on May 18, 2024
By Mari Selvan
πŸ‘οΈ 125 - Views
⏳ 4 mins
πŸ’¬ 1 Comment
SVG Stroke

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
Copy To Clipboard
<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
Copy To Clipboard
<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.

πŸ‘¨β€πŸ’» Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
πŸ‘‹ Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy