apike.ca

Coloring Shapes in SVG

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

Related Topics