apike.ca

We need more traffic. Please use the social buttons above to spread the word!

SVG Tutorial

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