Opacity

The opacity attribute defines the transparency of an object or a group of objects. The opacity always takes a value between 0 (which represents 0% opacity or complete transparency) and 1 (which represents 100% opacity or complete solidity). The default value is always 1. fill-opacity controls the opacity of the fill and the stroke-opacity controls the opacity of the stroke. There is also a plain opacity attribute which applies to a group.

Examples

The first example shows a series of red circles with thin black outlines. The transparency of the interior of the circle, the fill, varies from 0 to 1 from left to right.

<circle cx="x" cy="y" r="20" fill="#ff0000" fill-opacity="value" stroke="#000000" stroke-width="1"/>

The fill-opacity of the first circle is 0 so it is completely transparent. The second circle has a fill-opacity of 0.1 (10%), the third circle has a fill-opacity of 0.2 (20%) and so on until the last circle which is solid (fill-opacity of 1 or 100%).

The second example shows another series of red circles, these with thick black outlines. These all have a solid fill but the stroke-opacity varies from 0 to 1 from left to right.

<circle cx="x" cy="y" r="20" fill="#ff0000" stroke="#000000" stroke-opacity="value" stroke-width="6"/>

The stroke-opacity of the first circle is 0 so the outline completely transparent. The second circle has a stroke-opacity of 0.1 (10%), the third circle has a stroke-opacity of 0.2 (20%) and so on until the last circle which has a solid outline (stroke-opacity of 1 or 100%).

The final example shows various combinations of opacity attributes. A rounded yellow rectangle with a green border is superimposed on a blue circle with a magenta border.

The last image was obtained by placing the circle and the rectangle in a group and assigning an opacity in the group tag.

<g opacity="0.5">
  <circle cx="150" cy="125" r="100" fill="#0000ff" stroke="#ff00ff" stroke-width="20"/>
  <rect x="25" y="100" width="250" height="50" rx="10" rx="10" fill="#ffff00" stroke="#008000" stroke-width="20"/>
</g>

Gradients

It is possible to smoothly vary a colour or an opacity in a fill or stroke using a gradient. There are two types of gradients, linear and radial. A linear gradient changes colour/opacity in a straight line from a point whilst colour/opacity changes radiate outwards from a point with a radial gradient. A gradient is defined in the <defs> section and then referenced in fill and stroke attributes.

<linearGradient>

A linear gradient definition looks like this:

<linearGradient id="name" x1="startx" y1="starty" x2="endx" y2="endy" spreadMethod="spread" gradientTransform="transformation" gradientUnits="units">
  <stop offset="percent1" stop-color="colour1" stop-opacity="opacity1">
  <stop offset="percent2" stop-color="colour2" stop-opacity="opacity2">
  ...
  <stop offset="percentn" stop-color="colourn" stop-opacity="opacityn">
</linearGradient>

Not all of the attributes are required but the gradient must have an id.

Attribute	Purpose	Value	Default
id	Unique name identifying the gradient.
x1, y1	Starting point of the gradient vector.	percentage	0%
x2, y2	Ending point of the gradient vector.	percentage	100%
spreadMethod	Controls what happens if the gradient starts or ends inside the target area.	pad | reflect | repeat	pad
gradientTransform	Defines optional additional transformations like rotation or skewness.
gradientUnits	Defines the coordinate system for the points (x1,y1) and (x2,y2).	userSpaceOnUse | objectBoundingBox	objectBoundingBox
offset	Defines where a gradient stop is placed.	percentage
stop-colour	Defines the colour used at the gradient stop.	colour	black
stop-opacity	Defines the opacity used at the gradient stop.	number between 0 and 1	1

The spreadMethod takes one of three values:

• pad: use the terminal colours to fill or pad out the remaining area of the shape being filled
• reflect: repeat the gradient pattern start-to-end, end-to-start, start-to-end, … until the region is filled
• repeat: repeat the gradient pattern start-to-end, start-to-end, start-to-end, … until the region is filled

The gradientUnits takes one of two values:

• userSpaceOnUse: the coordinates (start_x,start_y) and (end_x,end_y) represent values in the current user coordinate system (the viewBox)
• objectBoundingBox: the coordinates (start_x,start_y) and (end_x,end_y) represent values relative to the bounding box of the element to which the gradient is being applied

Examples

In each case, the gradient is defined in the <defs> section and invoked with the command

<rect x="xcoordinate" y="ycoordinate" width="250" height="250" fill="url(#gradientID) stroke="#000000" stroke-width="4"/>

where (x_coordinate,y_coordinate) is the coordinate of the upper left corner of the rectangle and the gradientID (preceded by a hash # sign) is the unique identifier of the gradient.

Here are two more examples, one with a smooth transition from red to yellow and the other showing an opacity gradient over the colour blue.

<radialGradient>

The radial gradient is set up in a similar way.

<radialGradient id="name" cx="centrex" cy="centrey" r="radius" fx="focusx" fy="focusy" spreadMethod="spread" gradientTransform="transformation" gradientUnits="units">
  <stop offset="percent1" stop-color="colour1" stop-opacity="opacity1">
  <stop offset="percent2" stop-color="colour2" stop-opacity="opacity2">
  ...
  <stop offset="percentn" stop-color="colourn" stop-opacity="opacityn">
</radialGradient>

Not all of the attributes are required but the gradient must have an id. The focal point (fx,fy) must be within the radius r. If no focal point is given, it is assumed to be the same value as the centre (cx,cy).

Attribute	Purpose	Value	Default
id	Unique name identifying the gradient.
cx, cy	Defines the centre of the gradient and are a percentage of the width and height.	percentage	50%
r	Defines the radius of the gradient.	percentage	50%
fx, fy	Defines the focal point of the gradient and are a percentage of the width and height.	percentage	50%
spreadMethod	Controls what happens if the gradient starts or ends inside the target area.	pad | reflect | repeat	pad
gradientTransform	Defines optional additional transformations like rotation or skewness.
gradientUnits	Defines the coordinate system for the points (cx,cy) and (fx,fy).	userSpaceOnUse | objectBoundingBox	objectBoundingBox
offset	Defines where a gradient stop is placed.	percentage
stop-colour	Defines the colour used at the gradient stop.	colour	black
stop-opacity	Defines the opacity used at the gradient stop.	number between 0 and 1	1

The focal point (fx,fy) must be within the radius r. It no focal point is given, it is assumed to be the same value as the centre (cx,cy).

Examples

In each case, the gradient is defined in the <defs> section and invoked with the command

<rect x="xcoordinate" y="ycoordinate" width="250" height="250" fill="url(#gradientID) stroke="#000000" stroke-width="4"/>

where (x_coordinate,y_coordinate) is the coordinate of the upper left corner of the rectangle and the gradientID (preceded by a hash # sign) is the unique identifier of the gradient.

Filters

SVG has a number of filters which can be used on painted areas. Some of the permitted attributes are:

Attribute	Purpose	Value	Default
filterUnits	Define the coordinate system for height, width, x and y.	objectBoundingBox | userSpaceOnUse	objectBoundingBox
height	Control the height of the element in the user coordinate system.	number
id	Unique identifier.	name
width	Control the width of the element in the user coordinate system.	number
x,y	x- and y-coordinates of the element.	number	0

There are quite a few available filter effects.

• <feBlend>
• <feColorMatrix>
• <feComponentTransfer>
• <feComposite>
• <feConvolveMatrix>
• <feDiffuseLighting>
• <feDisplacementMap>
• <feDistantLight>
• <feFlood>
• <feGaussianBlur>
• <feImage>
• <feMerge>
• <feMorphology>
• <feOffset>
• <fePointLight>
• <feSpecularLighting>
• <feSpotLight>
• <feTile>
• <feTurbulence>

I haven’t used filters much yet. Once I understand them better, I will add to this section.