SVG Kickstart 2: Passing Second Grade Geometry with Flying Colors (and Shapes)
Table of Contents
- SVG KICKSTART TUTORIAL #1
- SVG KICKSTART TUTORIAL #2
- 1. Introduction
- 2. Serving Up A Slice of SVG Pie
- 3. The Shape Of Things And Other Stuff
- 4. Colour Me Stupid
- 5. Basic Shapes And Colours Are Boring!
- 6. Don't Be A Tool, Use A Tool
- 7. Conclusion
4. Colour Me Stupid
Graphics would not be very exciting without colour. As you have noticed by now, SVG elements can be filled or stroked with a variety of colours. Up to this point I have used English names for these colours (as defined in CSS2), but SVG offers many ways in which colours can be expressed:
English Words ("salmon", "blue") (Expand)
As mentioned, English words like "red", "purple" can be used to indicate specific colours as recognized by the HTML/CSS model. However, SVG expands this vocabulary to 145 different colours, including bisque, cornflowerblue, and salmon. The full list supported by conforming SVG viewers is given in the SVG specification here.
Short Hexadecimal Form ("#8AF") (Expand)
A common means of expressing colour on the web is the short hexadecimal form which allows the user to express a colour by using "#" followed by 3 hexadecimal digits. Each hexadecimal digit represents the Red, Green, and Blue components of that colour. This notation gives the user 4096 total possible colours to choose from that are spread evenly across the entire colour spectrum. For the curious, when wishing to convert from Short to Full Hexadecimal form, each hexadecimal is repeated to get a full byte. So "#567" really means Red="#55", Green="#66", and Blue="#77" (or when written using the Full Hexadecimal Form you would write "#556677".
Full Hexadecimal Form ("#80AEFF") (Expand)
Colours can be expressed using full hexadecimal notation by using "#" following by 6 hexadecimal digits. Each pair of hexadecimal digits corresponds to the Red, Green, and Blue components of that colour (giving the user a possibility of roughly 16 million colours). Thus, "#00FF00" would be solid green.
RGB Triplet Form ("rgb(100,149,237)") (Expand)
Perhaps the most readable/understandable notation, this allows the customer to specify the Red, Green, and Blue components in decimal form (i.e. a number from 0 to 255) inside rgb(). For example, "rgb(100,149,237)" would specify the salmon colour.
Click to expand any of the above if you are unfamiliar with CSS Color syntax. Any of the above can be used wherever colours are needed to be referenced in SVG.
<<<Prev: 3. The Shape Of Things... Next: 5. Basic Shapes And Colours Are Boring!>>>