W3cubDocs

/SVG

fill

The fill attribute has two different meanings. For shapes and text it's a presentation attribute that defines the color (or any SVG paint servers like gradients or patterns) used to paint the element; for animation it defines the final state of the animation.

You can use this attribute with the following SVG elements:

For animation, these elements are using this attribute: <animate>, <animateMotion>, <animateTransform>, and <set>.

Example

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple color fill -->
  <circle cx="50" cy="50" r="40" fill="pink" />

  <!-- Fill circle with a gradient -->
  <defs>
    <radialGradient id="myGradient">
      <stop offset="0%" stop-color="pink" />
      <stop offset="100%" stop-color="black" />
    </radialGradient>
  </defs>

  <circle cx="150" cy="50" r="40" fill="url(#myGradient)" />

  <!--
  Keeping the final state of an animated circle
  which is a circle with a radius of 40.
  -->
  <circle cx="250" cy="50" r="20">
    <animate
      attributeType="XML"
      attributeName="r"
      from="0"
      to="40"
      dur="5s"
      fill="freeze" />
  </circle>
</svg>

altGlyph

Warning: As of SVG2 <altGlyph> is deprecated and shouldn't be used.

For <altGlyph>, fill is a presentation attribute that defines the color of the glyph.

Value <paint>
Default value black
Animatable Yes

Note: As a presentation attribute fill can be used as a CSS property.

animate

For <animate>, fill defines the final state of the animation.

Value freeze (Keep the state of the last animation frame) | remove (Keep the state of the first animation frame)
Default value remove
Animatable No

animateMotion

For <animateMotion>, fill defines the final state of the animation.

Value freeze (Keep the state of the last animation frame) | remove (Keep the state of the first animation frame)
Default value remove
Animatable No

animateTransform

For <animateTransform>, fill defines the final state of the animation.

Value freeze (Keep the state of the last animation frame) | remove (Keep the state of the first animation frame)
Default value remove
Animatable No

circle

For <circle>, fill is a presentation attribute that defines the color of the circle.

Value <paint>
Default value black
Animatable Yes

Note: As a presentation attribute fill can be used as a CSS property.

ellipse

For <ellipse>, fill is a presentation attribute that defines the color of the ellipse.

Value <paint>
Default value black
Animatable Yes

Note: As a presentation attribute fill can be used as a CSS property.

path

For <path>, fill is a presentation attribute that defines the color of the interior of the shape. (Interior is define by the fill-rule attribute)

Value <paint>
Default value black
Animatable Yes

Note: As a presentation attribute fill can be used as a CSS property.

polygon

For <polygon>, fill is a presentation attribute that defines the color of the interior of the shape. (Interior is define by the fill-rule attribute)

Value <paint>
Default value black
Animatable Yes

Note: As a presentation attribute fill can be used as a CSS property.

polyline

For <polyline>, fill is a presentation attribute that defines the color of the interior of the shape. (Interior is define by the fill-rule attribute)

Value <paint>
Default value black
Animatable Yes

Note: As a presentation attribute fill can be used as a CSS property.

rect

For <rect>, fill is a presentation attribute that defines the color of the rectangle.

Value <paint>
Default value black
Animatable Yes

Note: As a presentation attribute fill can be used as a CSS property.

set

For <set>, fill defines the final state of the animation.

Value freeze (Keep the state of the last animation frame) | remove (Keep the state of the first animation frame)
Default value remove
Animatable No

text

For <text>, fill is a presentation attribute that defines what the color of the text.

Value <paint>
Default value black
Animatable Yes

Note: As a presentation attribute fill can be used as a CSS property.

textPath

For <textPath>, fill is a presentation attribute that defines the color of the text.

Value <paint>
Default value black
Animatable Yes

Note: As a presentation attribute fill can be used as a CSS property.

tref

Warning: As of SVG2 <tref> is deprecated and shouldn't be used.

For <tref>, fill is a presentation attribute that defines the color of the text.

Value <paint>
Default value black
Animatable Yes

Note: As a presentation attribute fill can be used as a CSS property.

tspan

For <tspan>, fill is a presentation attribute that defines the color of the text.

Value <paint>
Default value black
Animatable Yes

Note: As a presentation attribute fill can be used as a CSS property.

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
fill No No 3 No No No No No 4 No No No
context-fill No No 111 No No No No No 111 No No No

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill