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.
Note:
When used as a presentation attribute, fill also has a CSS property counterpart: fill. When both are specified, the CSS property takes priority.
The SVG presentational fill attribute and the CSS fill property can be used with the following SVG elements:
<svgviewBox="0 0 300 100"xmlns="http://www.w3.org/2000/svg"><!-- Basic color fill --><circlecx="50"cy="50"r="40"fill="pink"/><!-- Fill circle with a gradient --><defs><radialGradientid="myGradient"><stopoffset="0%"stop-color="pink"/><stopoffset="100%"stop-color="black"/></radialGradient></defs><circlecx="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.
--><circlecx="250"cy="50"r="20"><animateattributeType="XML"attributeName="r"from="0"to="40"dur="5s"fill="freeze"/></circle></svg>
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
<svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 300 90"><style>path{stroke-width: 2px;marker:url(#circle);}</style><pathd="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"/><pathd="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"/><pathd="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"/><markerid="circle"markerWidth="12"markerHeight="12"refX="6"refY="6"markerUnits="userSpaceOnUse"><circlecx="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.
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.)
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.)
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.)
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Deprecated. Not for use in new websites.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.