Coloring Shapes in SVG

By mbystedt on Feb 27, 2014, 5:44:50 PM

SVG attributes that define how to paint or color can use the values in the following table. If it's a paint-type attribute then you can use color values and the two "non-color" values.

For complex coloring, please look at the pages on gradients and patterns.

Stroke/Fill	Explanation
none	Nothing is shown. Painting with invisible ink!
currentColor	Results in the 'color' attribute being used to define the color. Included for compatibility with other non-SVG CSS documents (like HTML CSS). Some color requiring attributes include this.

List 1. Paint Values. Non-color values that are included in paint. (%paint)

Class	Explanation	Example
Keyword	SVG defines everything from 'aliceblue' to 'yellowgreen'. See SVG Color Reference	Aliceblue
Functional	A functional way to define the color. Either values in the range from 0 to 255 or percentages can be used. Mixing percents and values is illegal.	rgb(255,255,255) rgb(100%,100%,100%)
Hexadecimal	This is the same way colors are defined in HTML.	#FFFFFF
URI	A reference to a color gradient or pattern.	url(#MyGradient)

List 2. Color Values. The different ways to define a color (%color and %paint)

Color

Paint

The difference between a paint and color in SVG is simply that paints can use the non-color values. Attributes needing a color can only use a value in 'List 2'. In general, attributes needing a color end in '-color'.