Open In App
Related Articles

SVG stroke Attribute

Improve Article
Improve
Save Article
Save
Like Article
Like

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:


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Similar Reads
Complete Tutorials