SVG Opacity vs Fill-Opacity with Overlapping Shapes

Understanding the difference between opacity and fill-opacity is essential when rendering overlapping SVG shapes, as each property controls transparency at a fundamentally different stage of the rendering pipeline. While fill-opacity adjusts the alpha channel of only the interior paint of an element, opacity applies uniform transparency to the entire rendered object or group as a single composited layer. This distinction drastically alters the visual output, creating either compounded blend regions or a seamless, uniform transparency across overlapping geometries.

How fill-opacity Affects Overlapping Shapes

The fill-opacity attribute dictates the alpha value applied strictly to the fill paint server of a shape. It operates directly at the rasterization stage of the individual path.

• Stroke Independence: Changing fill-opacity leaves the shape’s stroke fully opaque (unless stroke-opacity is explicitly modified).
• Independent Path Blending: When two distinct shapes with fill-opacity overlap, each shape is drawn directly to the canvas in the order defined by the DOM. Consequently, the overlapping intersection combines both alpha values, resulting in a visibly darker, blended intersection region.
• Compound Paths: For single, self-intersecting paths, rendering depends on the fill-rule (nonzero or evenodd), but simple overlapping geometries drawn as separate elements will always exhibit compounded transparency.

How opacity Affects Overlapping Shapes

The opacity attribute controls the transparency of an entire SVG element or group (<g>) after all sub-components and children are rendered.

• Off-Screen Compositing: When opacity is applied to a container element like a <g>, the rendering engine first renders all child elements onto an off-screen buffer at full opacity. Once the group is completely drawn as a single, flattened image, the opacity value is applied uniformly to that buffer before drawing it onto the canvas.
• Seamless Overlaps: Because the elements inside a group are flattened before transparency is applied, overlapping shapes within that group do not blend with one another. There are no dark intersection seams between intersecting sibling shapes inside the group.
• Stroke and Fill Unification: Applying opacity to an individual shape dims both its fill and stroke simultaneously as a unified layer.

Key Differences Summary

Practical Selection Guide

• Use fill-opacity when you need a transparent shape with an opaque border, or when you explicitly want overlapping geometries to create multi-layered, subtractive color blends.
• Use opacity on grouped elements (<g>) when creating complex icons, illustrations, or multi-part shapes that must appear translucent as a unified object without showing their internal overlapping construction lines.