SVG r Attribute

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>

output:

Explore