Colour
Up until here you've had to just trust that "blue" means the colour blue. Now we'll get a little more detailed as to what palette is available and how colours can be specified for programmatic control ("salmon", "orange" and "tomato" don't fit very well in a for/next loop). These statements are all equivalent:
- fill="cornflowerblue"
- fill="rgb(100, 149, 237)"
- fill="#6495ED"
- fill="aliceblue"
The full list can be found in the boring part of the specification under Recognized color keyword names. For me the highlight of this was finding that I could use "peachpuff" and "hotpink" as pre-defined constants in code. I wonder what kind of debates went on around naming "darkgoldenrod" vs "darkgoldenrodyellow" or if they considered the effect on native North Americans of "navajowhite" -- not to mention poor Alice, who will forever find "aliceblue" when she googles herself. Anyhow, knowing a few of these names is helpful and makes sample code more legible, imo. Here's a sample to demonstrate the basic uses of these.
Colour Example
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox = "0 0 1100 400" version = "1.1">
<defs>
<polygon id = "s1" points = "60,0 120,0 180,60 180,120 120,180 60,180 0,120 0,60" fill = "none" stroke = "black" stroke-width = "3"/>
<polygon id = "s2" points = "60,0 120,0 180,60 180,120 120,180 60,180 0,120 0,60" fill = "rgb(240, 200, 255)" stroke = "black" stroke-width = "3"/>
<circle id = "s3" cx = "100" cy = "100" r = "75"/>
<circle id = "s4" cx = "100" cy = "100" r = "75"/>
<linearGradient id = "simpleGradient">
<stop stop-color = "wheat" stop-opacity = "1"/>
</linearGradient>
</defs>
<use x = "10" y = "10" xlink:href = "#s1"/>
<use x = "10" y = "210" xlink:href = "#s2"/>
<!-- the next four are all the same fill colour -->
<!-- but use different names -->
<use x = "300" y = "10" xlink:href = "#s3" fill = "cornflowerblue"/>
<use x = "370" y = "10" xlink:href = "#s3" fill = "rgb(100, 149, 237)"/>
<use x = "440" y = "10" xlink:href = "#s3" fill = "#6495ED"/>
<use x = "510" y = "10" xlink:href = "#s3" fill = "rgb(39.2%, 58.4%, 92.9%)"/>
<!-- this one is actually a gradient fill -->
<!-- with only one colour -->
<use x = "400" y = "210" xlink:href = "#s4" fill = "url(#simpleGradient)"/>
</svg>