Previous Next

SVG Stroke

Stroke is an attribute used to create outline of shape, apply color etc. It uses some properties such as width, linecap, dasharray etc. These properties help stroke to draw lines, appply color, define width etc.

Syntax

stroke="color"

You can define stroke in any shape, text, path etc.

Stroke Width

Stroke width attribute is used to make stroke outline thick and bold, it takes value in number.

Syntax

stroke-width="value"

You can use stroke width property in any shape to increase outline's thickness.

Linecap

Stroke linecap property is used to make stroke outline in different styles, it takes values like butt, round, and square.

Syntax

stroke-linecap="values"

You can use stroke linecap property in line to make end of line in different styles.

Stroke Dasharray

Stroke dasharray property is used to make stroke outline dashed, it takes values in number or list of numbers.

Syntax

stroke-dasharray="number/s"

You can use stroke dasharray property in path or other shape to make dashed outline or line.

You can use SVG stroke any where within an HTML document.

Practice Task

Open notepad or any other text editor, follow the following points.

• Use <svg> element to draw any shape or line on webpage
• Give width and height of 300 300 respectivelly to SVG element
• Use above any stroke property in svg element

save file with name task.html or task.htm and then open it using any browser and see results.

SVG Code Generators

Try our SVG generators to practice and generate SVG code in real time.

Previous Next