apike.ca

Opacity in SVG

Opacity effects the blending of colors being drawn to the screen and colors already there. Opacity can be applied to a group or an individual graphic element. Opacity is defined as a value from 0 to 1 or a percentage. A value of 1 or greater is opaque and no color shows from below. A value of 0 or less results in nothing being drawn. It is generally inherited and defaults to 1.

Attribute
Explanation
Applies to...
opacity
The overal opacity of the element.
Everything but gradient stops
fill-opacity
The opacity of the fill paint.
Elements with the attribute 'fill'
stroke-opacity
The opacity of the stroke paint.
Elements with the attribute 'stroke'
stop-opacity
The opacity of the gradient stop.
Gradient stops
Attributes which effect opacity

A shape with 'fill-opacity="50%"' and 'opacity="50%"' is filled with color at 25% opacity.

If you need greater control of the opacity then use a gradient or a mask. Gradients can give you smooth transitions between opaque and transparent sections but they only apply to things you can stroke or fill. Masks give the greatest control as you can arbitrarily change the opacity of points on groups and individual elements.

Related Topics