This chapter is from the book
This chapter is from the book
This chapter is from the book
Working with Color
SVG's color handling is similar to HTML; many of the same terms and properties are shared between the two markup languages. Developers can designate color values through several methods. Two of the most common methods are: 1) using a color's name or 2) using a color's RGB hexadecimal value.
In the previous examples, you've used the first method by designating a color by its name. It's important to note, however, that not just any color name will work. A set of color keywords has been defined by the W3C and is viewable in the appendix of this book.
Color keywords are great for quick designation of a color. However, they are often not the precise color that a designer is looking for. Hexadecimal notation of color offers a greater number of possibilities for defining an RGB color than the keyword method.
As nearly all designers and developers who have created images for the Web are already familiar with hexadecimal notation, this book will not attempt to provide a tutorial on the subject. Still, a cursory overview of the notation is in order to serve as an explanation of how this book will refer to color values.
For those unfamiliar with hexadecimal notation, a quick refresher course should help. Color on a monitor is defined by mixing three color channels: red, green, and blue (known as "RGB"). Each channel has 256 levels, allowing for a total of 16,777,216 possible colors. Traditionally, screen colors were represented as three values, based on the level value of each channel. For instance, to create a solid blue hue, you would define the color as (0r, 0g, 255b).
To offer an alternative to defining color using this nine number structure, the hexadecimal system was adopted.
Each channel's 3-digit level value can be condensed to two characters, using the numbers 0 through 9 and the letters A through F. By combining two of these characters, you can represent any channel value. The combination of characters to equal a 3-digit value is based upon a mathematical calculation.
Most designers do not think in terms of RGB values, much less in terms of the hexadecimal notation of such values. Rather, they use their design program's color "pickers," a palette or interface that allows a color to be created by adjusting its levels of red, green, and blue. In many cases, though, the same program can display the determined color's value in hexadecimal notation (a select set of colors defined with this notation—216 colors to be precise—is sometimes referred to as "Web-safe" colors) by changing a setting in the color picker.
Adobe PhotoShop and Illustrator, Macromedia FreeHand, Corel Draw, Jasc WebDraw, and many other image creation programs have such an ability. If you do not own one of these tools, you can still find a color's hexadecimal notation through one of these many methods:
Apple's Macintosh operating system has a system-wide color picker (available in almost any Mac program that allows you to select colors) with an "HTML Picker." Once accessed, you can hold the "option" key to convert your cursor into an "eyedropper" capable of capturing any color on screen. After clicking on a color with the eyedropper, the HTML Picker will display its hexadecimal value in a form field that you can copy and paste into your code.
You can use Kresch.com's Java RGB Color Tester tool free-of-charge online at http://kresch.com/resources/javacolor.htm. This Java applet is an incredibly useful tool for those without a design program, as it visually adjusts the color of the applet according to three sliders (red, green and blue). Both the traditional RGB values and hexadecimal values are displayed as you adjust the sliders.
A limited list of colors, their RGB values, their RGB hexadecimal notation, and their color "keywords" are listed in the appendix of this book.
Lastly, you can visit this book's companion site, http://www.svgnow.com. You will be able to find up-to-date links to free hexadecimal notation converters for several operating systems at the site.
Again, SVG can accept a variety of ways to specify a color. If you are trying to quickly apply a color and don't know the hexadecimal value, you can simply use an accepted color name. Most likely, however, if you are an experienced Web developer, you will use the hexadecimal notation for describing a color's RGB value. Thus, the remainder of this book will use hexadecimal notation for defining RGB color values.