SVG Kickstart 2: Passing Second Grade Geometry with Flying Colors (and Shapes)

by Jeff Schiller, 2005-07-05

Table of Contents

3. The Shape Of Things And Other Stuff

If you remember, our first example was of the Japan flag. Simply a red circle on a white rectangle. The circle and the rectangle are two of the primitive shapes that SVG support. The entire list of primitive shapes are:

Rectangle (Expand)

Circle (Expand)

Ellipse (Expand)

Line (Expand)

Polyline (Expand)

Polygon (Expand)

Expand each of the above to get more details and examples. I encourage you to read each section and look at the SVG code of each of the examples (neither is more than a few lines).

I'll use all of the above shapes by slapping them together into the crude facsimile of a butterfly:

Error! You do not have a browser that can display SVG content. Please read SVG Kickstart Tutorial #1 for instructions.

Now I know the above is not the world's finest specimen of art, but I never claimed I was an artist. And heck, coding SVG by hand is not the way artists are really intended to work (more on this later). The source for the above image is:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "">
<svg width="300" height="400" version="1.1" viewBox="0 0 300 400"
  xmlns="" xmlns:xlink="" >
  <title>A Butterfly Using Simple Shapes in SVG</title>
  <desc>A Butterfly Using Simple Shapes in SVG</desc>
  <!-- A simple picture of a butterfly using primitive shapes
    such as rectangles, polygons, polylines, ellipses, lines,
    and circles. -->
  <rect id="sky" x="0" y="0" width="300" height="400" fill="blue" stroke="none"/>
  <!-- Left wing -->
  <polygon id="leftwing" stroke="black" fill="yellow" points="5,50 5,400 150,200" />
  <polyline id="leftwingdecal" stroke="black" stroke-width="8" fill="none"
    points="50,150 30,175 50,200 30,225 50,250 30,275" />
  <!-- Right wing -->
  <polygon id="rightwing" stroke="black" fill="yellow" points="295,50 295,400 150,200" />
  <polyline id="rightwingdecal" stroke="black" stroke-width="8" fill="none"
    points="250,150 270,175 250,200 270,225 250,250 270,275" />
  <ellipse id="body" cx="150" cy="250" rx="70" ry="120" stroke="black" fill="green" />
  <!-- Left antenna -->
  <line id="leftstalk" x1="140" y1="120" x2="100" y2="20" stroke="black" stroke-width="5" />
  <circle id="leftbead" cx="100" cy="20" fill="white" r="7" />
  <!-- Right antenna -->
  <line id="rightstalk" x1="160" y1="120" x2="200" y2="20" stroke="black" stroke-width="5" />
  <circle id="rightbead" cx="200" cy="20" fill="white" r="7" />
  <circle id="head" cx="150" cy="90" r="50" stroke="black" fill="orange" />

I'd like to comment on a couple things with the butterfly SVG code:

<<<Prev: 2. Serving Up A Slice of SVG Pie Next: 4. Colour Me Stupid>>>

codedread codedread