SVG Stroke

You are Here:

SVG Stroke

The stroke SVG attribute is used to paint the outline of the shape by user defined color. The default color of stroke is 'black'.

In this example, we will use <path> SVG element to demonstrate SVG stroke.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <svg width="250" height="40"> <path stroke="red" d="M 2 2 L 200 2" /> <path stroke="green" d="M 2 15 L 200 15" /> <path stroke="blue" d="M 2 30 L 200 30" /> </svg> </body> </html>

SVG Stroke Width

The SVG stroke-width attribute is used to define the width of the stroke to be applied to the shape.

In this example, we will use <path> SVG element to demonstrate SVG stroke-width.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <svg height="80" width="300"> <g fill="none" stroke="black"> <path stroke-width="2" d="M5 20 L 200 20" /> <path stroke-width="4" d="M5 40 L 200 40" /> <path stroke-width="6" d="M5 60 L 200 60" /> </g> </svg> </body> </html>

SVG Stroke Linecap

The SVG stroke-linecap attribute is used to define the shape to be used at the end of open subpaths when they are stroked.

In this example, we will use <path> SVG element to demonstrate SVG stroke-linecap.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <svg height="80" width="300"> <g fill="none" stroke="#1a1a1a" stroke-width="8"> <path stroke-linecap="butt" d="M5 20 L 200 20" /> <path stroke-linecap="round" d="M5 40 L 200 40" /> <path stroke-linecap="square" d="M5 60 L 200 60" /> </g> </svg> </body> </html>

SVG Stroke Dasharray

The SVG stroke-dasharray attribute is used to define the pattern of dashes and gaps used to paint the outline of the shape;

In this example, we will use <path> SVG element to demonstrate SVG stroke-dasharray.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <svg height="80" width="300"> <g fill="none" stroke="black" stroke-width="5"> <path stroke-dasharray="5,5" d="M5 20 L 200 20" /> <path stroke-dasharray="10,10" d="M5 40 L 200 40" /> <path stroke-dasharray="20,10,5,5,5,20" d="M5 60 L 200 60" /> </g> </svg> </body> </html>

Attributes Value

AttributeExplanation
strokeSpecifies the color of text, line or outline of any element.
stroke-widthSpecifies the thickness of text, line or outline of any element.
stroke-linecapSpecifies the different types of ending of a line or outline of any path.
stroke-dasharrayUsed to create dashed lines.

Reminder

Hi Developers, we almost covered 91% of SVG Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in SVG.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author