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>```

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.

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">

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

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 (startx,starty) and (endx,endy) represent values in the current user coordinate system (the viewBox)
• objectBoundingBox: the coordinates (startx,starty) and (endx,endy) 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 (xcoordinate,ycoordinate) 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 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">

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).

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 (xcoordinate,ycoordinate) 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:

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.