Open In App

SVG stroke Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

The stroke attribute is an attribute defining the color used to paint the outline of the shape

Syntax:

stroke= "color"

Attribute Values:

  • paint: The color in which we want to paint the element.

We will use the stroke attribute for setting the color of the element.

Example 1: In this example, we will use the stroke attribute for setting the color of circle element.




<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 200 100" 
        xmlns="http://www.w3.org/2000/svg">
          
        <circle cx="10" cy="10" r="5" 
            fill="none" stroke="green" />
          
        <circle cx="23" cy="23" r="9" 
            fill="none" stroke="green" />
    </svg>
</body>
  
</html>


Output:

Example 2: In this example, we will use the stroke attribute for setting the color of rect element.




<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 200 100" 
        xmlns="http://www.w3.org/2000/svg">
          
        <rect x="10" y="10" height="11" 
            width="11" fill="none" stroke="green" />
          
        <rect x="23" y="23" height="22" 
            width="22" fill="none" stroke="green" />
    </svg>
</body>
  
</html>


Output:



Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads