<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head><title>Color Cube using Embedded SVG</title> <style type="text/css"> span.k {background-color: #000000} span.r {background-color: #FF0000} span.g {background-color: #00FF00} span.b {background-color: #0000FF} span.y {background-color: #FFFF00} span.c {background-color: #00FFFF} span.m {background-color: #FF00FF} span.w {background-color: #FFFFFF} </style> <script type="text/javascript" src="buttons.js"></script> <script type="text/javascript"> <!-- var svgDocument = null; function inithtml() { var embed = document.getElementById("embed"); svgDocument = embed.getSVGDocument(); } function changeFace() { var embed = document.getElementById('embed'); try { embed.reload(); } catch (e) { svgDocument.location.reload(); } } //--> </script> </head> <body bgcolor="#CCCCCC" onload="inithtml();"> <font color="blue"> <h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; SVG Color Cube</h1> </font> <!--[if gte IE 5.0]> <embed src="circles.svg" id="embed" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" height=514" width="514"> <br /> <form name="selface" id="selface" onsubmit="event.preventDefault();">Select Face Number: <input name="facenum" size="1" value="0" type="text"> &nbsp; <button onclick="changeFace()">Change Face</button> </form> <![endif]--> <![if !IE]> <font color="blue"> This has been tested to work properly with Internet Explorer version 5.0 and higher<br /> with the Adobe SVG plugin. Although Firefox 1.5 has a built in SVG viewer, the<br /> server is not corrently configured to return the correct mime type, and often other<br /> browsers do not work. You are not using Internet Explorer 5.0 or higher, so if you<br /> wish to see a set of 256 colored circles above a form, view with that browser and<br /> the plugin.<br /> </font> <![endif]> <pre>These 16 x 16 circles are generated using SVG, and represent one face of an RGB color cube. The 8 corners and 6 faces of the color cube are: Corner Face with corner colors 0: <span class="k"> </span> Black 0: <span class="b"> </span><span class="m"> </span> <span class="k"> </span><span class="r"> </span> 1: <span class="r"> </span> Red 1: <span class="c"> </span><span class="b"> </span> 2: <span class="g"> </span> Green <span class="g"> </span><span class="k"> </span> 3: <span class="b"> </span> Blue 2: <span class="r"> </span><span class="y"> </span> <span class="k"> </span><span class="g"> </span> 4: <span class="y"> </span> Yellow = Red + Green 3: <span class="m"> </span><span class="w"> </span> 5: <span class="c"> </Span> Cyan = Green + Blue <span class="r"> </span><span class="y"> </span> 6: <span class="m"> </span> Magenta = Red + Blue 4: <span class="w"> </span><span class="c"> </span> <span class="y"> </span><span class="g"> </span> 7: <span class="w"> </span> White = Red + Green + Blue 5: <span class="c"> </span><span class="w"> </span> Click <a href="circles.txt">here</a> to see the commented SVG <span class="b"> </span><span class="m"> </span> source code, and <a href="circleshtml.txt">here</a> to see the HTML code. </pre> <hr> <a href="coding.html" onMouseover="mouseOn('arrowleft1')" onMouseout="mouseOff('arrowleft1')"><img src="buttons/arrowleft_red.gif" name="arrowleft1" border="0"></a> &nbsp;Return to the Coding & Scripting main page. </body> </html>