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:

• <altGlyph>
• <circle>
• <ellipse>
• <path>
• <polygon>
• <polyline>
• <rect>
• <text>
• <textPath>
• <tref>
• <tspan>

For animation, these elements are using this attribute: <animate>, <animateColor>, <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

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

animate

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

animateColor

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

animateMotion

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

animateTransform

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

circle

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

ellipse

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

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)

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)

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)

rect

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

set

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

text

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

textPath

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

tref

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

tspan

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

Specifications

Browser compatibility