Drawing1 Example

Drawing1 Example -- Source Code

HTML Page -- index.htm

<!DOCTYPE html>

<!-- Drawing1 Example 
     Source code file: index.htm
     Draw two shapes (circle and polygon) using scalable 
     vector graphics (SVG). -->

<html>
    <head>
        <meta content="text/html; charset=utf-8" 
              http-equiv="Content-Type">
        <title>Drawing1 Example</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>

    <body>
        <h1>Drawing1 Example</h1>
        <svg width="200" height="100">
            <circle cx="50" cy="50" r="40" stroke="red" 
                    stroke-width="4px" fill="yellow" />
            <polygon points="110,30 130,75 180,80 198,45 175,15" 
                     style="fill:lime; stroke:purple; 
                     stroke-width:2px" />
        </svg>
    </body>
</html>

CSS Page -- styles.css

/* Drawing1 Example
   Source code file: styles.css
   Use a details element to hide information. */

body { background-color: #e0e0e0;
       color: #000060; 
       font-family: Verdana, Arial, sans-serif; }