SVG Stroking

Description of the stroke properties

SVG offers different stroke properties that can be applied to any kind of text, lines and outlines of elements. They allow controlling various aspects of a stroke. Here are some stroke properties:

stroke for specifying the color of a line, outline or text of an element,
stroke-linecap for specifying how the endings of an SVG line are rendered,
stroke-width for specifying the thickness of a line, outline, or text of an element,
stroke-dasharray for specifying dashed lines.

Example of the stroke property:



  
    Title of the document

Try it Yourself »

Example of the stroke-linecap property:



  
    Title of the document

Try it Yourself »

Example of the stroke-width property:



  
    Title of the document

Try it Yourself »

Example of the stroke-dasharray property:



  
    Title of the document

Try it Yourself »

Practice Your Knowledge

Which of the following statements is/are true about SVG stroking in HTML?

The stroke property is used to set the color of an SVG shape.

The stroke-width property is used to set the width of the stroke on an SVG shape.

The stroke-dasharray property is used to set or remove dash lines on an SVG shape.

The stroke-linecap property is used to specify the color of the corners on an SVG shape.

The stroke-linejoin property is used to specify the shape to be used at the corners of paths when they are stroked.

The stroke-opacity property is used to increase the width of the stroke on an SVG shape.

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

HTML Basics

❮ Prev Next ❯

Do you find this helpful?