Coloring in SVG

All SVG shapes can be coloured with two attributes: stroke fill. The stroke attribute determines the paint of the outside edge of the object and the fill attribute determines the inner paint. A colour value for an object is set within this attributes. There are several ways to define a colour:

Colour value	Examples
Keyword. You can find recognized colour keywords in the SVG 1.1 Recommendation
Numerical RGB specification. You can set function notation for a colour. Values in the range from 0 to 255 or from 0 to 100% can be used. Mixing percents and values is prohibited.
Hexadecimal RGB specification. You can set a `#` immediately followed by either three or six hexadecimal characters for a colour.

You can also use compex colours in gradients and patterns. For more information see SVG gradients and SVG patterns sections.

Opacity

Using opacity attribute you can also change colours. Opacity can be applied to a group or an individual graphic element. It is defined as a value from 0 to 1 or from 0% to 100%. A value of 1 is fully opaque and no colour is shown. A value of 0 is fully transparent. It is generally inherited and default value is 1.