r

The r attribute defines the radius of a circle.

You can use this attribute with the following SVG elements:

Percentages refer to the normalized diagonal of the current SVG viewport, which is calculated as <width>2+<height>22.

Example

html
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <radialGradient r="0" id="myGradient000">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>
  <radialGradient r="50%" id="myGradient050">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>
  <radialGradient r="100%" id="myGradient100">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>

  <circle cx="50" cy="50" r="0" />
  <circle cx="150" cy="50" r="25" />
  <circle cx="250" cy="50" r="50" />

  <rect x="20" y="120" width="60" height="60" fill="url(#myGradient000)" />
  <rect x="120" y="120" width="60" height="60" fill="url(#myGradient050)" />
  <rect x="220" y="120" width="60" height="60" fill="url(#myGradient100)" />
</svg>

circle

For <circle>, r defines the radius of the circle and therefor its size. With a value lower or equal to zero the circle won't be drawn at all.

Value <length> | <percentage>
Default value 0
Animatable Yes

Note: The radius size of a <circle> can also be defined with the r geometry property.

radialGradient

For <radialGradient>, r defines the radius of the end circle for the radial gradient.

The gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this end circle. A value of lower or equal to zero will cause the area to be painted as a single color using the color and opacity of the last gradient <stop>.

Value <length>
Default value 50%
Animatable Yes

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# RadialGradientElementRAttribute

Browser compatibility

svg.elements.circle.r

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
r

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

svg.elements.radialGradient.r

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
r

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also

  • CSS r property