Default Value of the SVG Fill Attribute

This article explains the default value of the SVG fill attribute when it is omitted from an element, how browser rendering engines handle unset fill properties according to the W3C specifications, and how inheritance affects the final rendered color of SVG shapes.

The Default Value

In Scalable Vector Graphics (SVG), the default value of the fill attribute is black (equivalent to #000000 or rgb(0, 0, 0)).

According to the official W3C SVG specifications, if you create an SVG shape—such as a <path>, <circle>, <rect>, or <polygon>—and do not explicitly define a fill attribute or an equivalent CSS property, the browser or rendering engine automatically paints the interior of that shape black with an opacity of 100%.

Inheritance and Overriding the Default

The fill property in SVG is an inherited presentation attribute. This means that while the ultimate initial default is black, an element will inherit the fill value from its parent container (such as a <g> or <svg> tag) if one is specified higher in the DOM tree.

• No fill defined anywhere: The element renders as solid black.
• Parent defines a fill: The child element inherits the parent’s fill color unless overridden locally.
• Transparent fill: To remove the default black color and make the interior transparent, you must explicitly declare fill="none".

You can set or override the fill using presentation attributes (fill="red"), inline CSS (style="fill: red;"), or external stylesheets via standard CSS selectors.