This chapter is from the book
This chapter is from the book
This chapter is from the book
Color in SVG
Hitherto, we have used only one of the three possible syntaxes to refer to the color of the stroke or fill of SVG elements. Let's take a closer look at the syntax options for defining color.
SVG provides two separate numeric syntaxes for defining the color of the stroke (outline) or fill of SVG graphic shapes. In addition, for certain commonly used colors, a third option exists—using a named color. I suggest you avoid named colors except for simple colors such as black, red, and white because the numeric syntax provides far more color options.
NOTE
The SVG 1.0 specification allows an ICC color profile to be specified.
For example, Listing 3.15, ColorSyntaxes.svg, shows three lines, each of which has an identical appearance onscreen. Each of the three lines is red. The first line element uses the syntax #FF0000 to describe the red color. The # character is essential. If you omit it, you will typically find that you have inadvertently produced a black outline or fill, rather than the color you intended. Following the # character are three couplets in hexadecimal notation. The first couplet, FF, indicates a red color value of 255 (hexadecimal FF); the second, 00, indicates a 0 value for the green color value; and the third, 00, indicates a 0 value for the blue color value.
TIP
If you use the red, green, and blue components of the color value as paired numbers—for example, #CCFFCC—you can write those values as #CFC, which will be interpreted as meaning the same as #CCFFCC by the SVG rendering engine.
The second line element expresses the same color, red, by using the syntax rgb(255,0,0). Notice that the full use of red is expressed as 255, not as 100, as may be the case in some other graphics settings. The third line element simply uses the name "red" to produce the same color onscreen. SVG provides a significant number of named colors.
NOTE
When using the rgb(...) syntax, you can use percentages. Thus, rgb(255,0,0) and rgb(100%, 0%, 0%) mean the same and produce a red color onscreen.
Listing 3.15 ColorSyntaxes.svg—Using the Three Syntaxes to Specify Color
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="300" height="300"> <line x1="20" y1="20" x2="220" y2="20" style="stroke:#FF0000; stroke-width:4"/> <line x1="20" y1="40" x2="220" y2="40" style="stroke:rgb(255,0,0); stroke-width:4"/> <line x1="20" y1="60" x2="220" y2="60" style="stroke:red; stroke-width:4"/> </svg>
If you run the code and examine the output onscreen, you can see that the three lines are identical in appearance.
CAUTION
One of the few situations in which letters are not case sensitive occurs when you use the letters in a color value expressed as hexadecimal. This is true because the use of hexadecimal letters (as numbers) existed before XML was created. Be sure to use lowercase only for rgb(12,23,34) because those letters are case sensitive.
SVG is rendered on the client machine, which opens up the possibilities of removing restrictions imposed in Web-safe palettes. Instead of a color cube of 6 colors x 6 colors x 6 colors, the SVG designer or developer can use a color cube that is 255 colors x 255 colors x 255 colors, thus greatly increasing the creative possibilities available in graphics delivered across the Web.
Additionally, as shown earlier in the chapter, SVG colors can have a variable opacity applied to any color in a graphic. No longer is transparency limited to a single color that must be fully transparent. In SVG images, any color may be transparent, fully opaque, or any of a potentially infinite number of semitransparent variants. In addition, the opacity of any part of a graphic may be animated using SVG declarative animation.
The SVG DOM interfaces for the SVGColor object are described in Chapter 4.