Opacity in SVG

By mbystedt on Feb 27, 2014, 5:47:15 PM

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.