SVGBasics

<script type="text/javascript"><!-- google_ad_client = "pub-1870854262600725"; google_alternate_color = "ffffff"; google_ad_width = 728; google_ad_height = 90; google_ad_format = "728x90_as"; google_ad_type = "text"; google_ad_channel ="6819119528"; google_color_border = "FFFFFF"; google_color_link = "006699"; google_color_bg = "FFFFFF"; google_color_text = "006699"; google_color_url = "006699"; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
Turn SVG On

Specifying Colours in SVG

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:

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

<?xml version="1.0" standalone="no"?>
<!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>
<script type="text/javascript"><!-- google_ad_client = "pub-1870854262600725"; google_alternate_color = "ffffff"; google_ad_width = 200; google_ad_height = 90; google_ad_format = "200x90_0ads_al"; google_ad_channel ="7003876230"; google_color_border = "FFFFFF"; google_color_bg = "FFFFFF"; google_color_link = "006699"; google_color_url = "006699"; google_color_text = "006699"; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
©2004 Late Night PC Service | About Us | Site Map | Contact Us