SVG stroke-width Attribute

The stroke-width attribute is an attribute defining the width of the stroke applied to the shape.

Syntax:

stroke-width="length"

Attribute Values:

length: Length at which we want to set the stroke-width attribute
percentage: Percentage at which we want to set the stroke-width attribute

We will use the stroke-width attribute for setting the width of the element.

Example 1: In this example we will use the stroke-width attribute for setting the width of rect using length value.

<!DOCTYPE html> 

<html> 

<body> 

    <svg viewBox="0 0 110 80" 

        xmlns="http://www.w3.org/2000/svg"> 

        <circle cx="15" cy="15" r="3" 

            stroke="green" stroke-width="11" /> 

    </svg> 

</body> 

</html>

Output:

Example 2: In this example, we will use the stroke-width attribute for setting the width of rect using percentage value.

<!DOCTYPE html> 

<html> 

<body> 

    <svg viewBox="0 0 110 80" 

        xmlns="http://www.w3.org/2000/svg"> 

        <circle cx="20" cy="20" r="6" 

            stroke="green" stroke-width="20%" /> 

    </svg> 

</body> 

</html>

Output

Article Tags :

HTML

Web Technologies

HTML-SVG

SVG-Attribute