SVG Stroke

Last Updated:

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
stroke Specifies the color of text, line or outline of any element.
stroke-width Specifies the thickness of text, line or outline of any element.
stroke-linecap Specifies the different types of ending of a line or outline of any path.
stroke-dasharray Used to create dashed lines.

Share this Page

Meet the Author