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.

The SVG presentational fill attribute and the CSS fill property can be used with the following SVG elements:

The SVG fill attribute can be used to define the final animation state with the following SVG elements:

Examples

Basic color and gradient fills, and animation

html
<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>

context-fill example

In this example, we define three shapes using <path> elements, each with a different stroke and fill color set on them. We also define a <circle> element as a marker via the <marker> element. Each shape has the marker applied via the marker CSS property.

The <circle> has stroke="context-stroke" and fill="context-fill" set on it. Because it is being set as a marker in the context of the shapes, these attributes cause it to inherit the fill and stroke set on the <path> element in each case.

html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 90">
  <style>
    path {
      stroke-width: 2px;
      marker: url(#circle);
    }
  </style>
  <path d="M 10 44.64 L 30 10 L 70 10 L 90 44.64 L 70 79.28 L 30 79.28 Z"
        stroke="red" fill="orange" />
  <path d="M 100 44.64 L 80 10 L 120 10 L 140 44.64 L 120 79.28 L 80 79.28 Z"
        stroke="green" fill="lightgreen" />
  <path d="M 150 44.64 L 130 10 L 170 10 L 190 44.64 L 170 79.28 L 130 79.28 Z"
        stroke="blue" fill="lightblue" />
  <marker id="circle" markerWidth="12" markerHeight="12"
          refX="6" refY="6" markerUnits="userSpaceOnUse">
    <circle cx="6" cy="6" r="3" stroke-width="2"
            stroke="context-stroke" fill="context-fill"  />
  </marker>
</svg>

The output is as follows:

Note: Elements can also use context-stroke and context-fill to inherit stroke and fill values when they are referenced by <use> elements.

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. (The interior is defined by the fill-rule attribute or fill-rule property.)

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. (The interior is defined by the fill-rule attribute or fill-rule property.)

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. (The interior is defined by the fill-rule attribute or fill-rule property.)

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 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
Scalable Vector Graphics (SVG) 2
# SpecifyingFillPaint

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android
fill 1 79 1.5 15 3 18 4 14 2 1.0 4.4
context-fill 124 124 111 110 No 124 111 82 No No 124
Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android
fill No No No No 3–16.4 No No No 2–16.4 No No
context-fill No No No No 3–16.4 No No No 2–16.4 No No
Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android
fill 1 79 2 15 3.1 18 4 14 2 1.0 4.4
context-fill 124 124 111 110 No 124 111 82 No No 124
Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android
fill 1 79 1.5 15 3 18 4 14 2 1.0 4.4
context-fill 124 124 111 110 No 124 111 82 No No 124
Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android
fill 1 79 1.5 15 3.1 18 4 14 2 1.0 4.4
context-fill 124 124 111 110 No 124 111 82 No No 124
Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android
fill 1 79 1.5 15 3 18 4 14 3 1.0 4.4
context-fill 124 124 111 110 No 124 111 82 No No 124
Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android
fill 1 79 1.5 15 3 18 4 14 3 1.0 4.4
context-fill 124 124 111 110 No 124 111 82 No No 124
Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android
fill 1 79 1.5 15 3 18 4 14 3 1.0 4.4
context-fill 124 124 111 110 No 124 111 82 No No 124
Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android
fill 1 79 1.5 15 3 18 4 14 3 1.0 4.4
context-fill 124 124 111 110 No 124 111 82 3 No 124
Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android
fill 1 79 1.5 15 3 18 4 14 2 1.0 4.4
context-fill 124 124 111 110 No 124 111 82 No No 124

svg.elements.circle.fill

BCD tables only load in the browser

svg.elements.ellipse.fill

BCD tables only load in the browser

svg.elements.path.fill

BCD tables only load in the browser

svg.elements.polygon.fill

BCD tables only load in the browser

svg.elements.polyline.fill

BCD tables only load in the browser

svg.elements.rect.fill

BCD tables only load in the browser

svg.elements.text.fill

BCD tables only load in the browser

svg.elements.textPath.fill

BCD tables only load in the browser

svg.elements.tref.fill

BCD tables only load in the browser

svg.elements.tspan.fill

BCD tables only load in the browser

© 2005–2024 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