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

Specification
SVG Animations Level 2
# FillAttribute
Scalable Vector Graphics (SVG) 2
# SpecifyingFillPaint

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