SVG r Attribute

Last Updated : 31 Mar, 2022

The r attribute defines the radius of the circle.

Syntax:

r="radius"

Attribute Values:

length: length at which we want to set the radius.
percentage: percentage at which we want to set the radius.

We will use the r attribute for setting the radius of the circle

Example1:

HTML

<!DOCTYPE html>  
<html>  
  
<body>  
    <svg viewBox="0 0 300 200" 
        xmlns="http://www.w3.org/2000/svg"> 
  
        <circle cx="40" cy="40" r="25"/> 
    </svg> 
</body>  
  
</html>

output:

Example2:

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg viewBox="0 0 300 200" 
        xmlns="http://www.w3.org/2000/svg"> 
          
        <radialGradient r="50%" id="myGradient00"> 
            <stop offset="0" stop-color="white" /> 
            <stop offset="100%" stop-color="black" /> 
        </radialGradient> 
  
        <rect x="5" y="5" width="60" height="60" 
            fill="url(#myGradient00)" /> 
    </svg> 
</body> 
  
</html> 