Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

SVG stroke Attribute

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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:


My Personal Notes arrow_drop_up
Last Updated : 31 Mar, 2022
Like Article
Save Article
Similar Reads
Related Tutorials