SVG Kickstart 2: Passing Second Grade Geometry with Flying Colors (and Shapes)
Table of Contents
- SVG KICKSTART TUTORIAL #1
- SVG KICKSTART TUTORIAL #2
- 1. Introduction
- 2. Serving Up A Slice of SVG Pie
- 3. The Shape Of Things And Other Stuff
- 4. Colour Me Stupid
- 5. Basic Shapes And Colours Are Boring!
- 6. Don't Be A Tool, Use A Tool
- 7. Conclusion
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)
We briefly looked at the <rect> element in our first tutorial. Here we showcase some of the attributes which rect has to offer:
- x,y - the coordinates of the top-left corner of the rectangle
- width,height - the, um, width and height of the rectangle. Bottom-right coordinates of the rectangle would be (x+width, y+height)
- stroke - What to outline the rectangle with. This can be "none" (for a rectangle without a border) or a colour or even patterns and other things (which we'll get to in later tutorials).
- stroke-width - How thick to make the border of the rectangle.
- fill - What to fill the rectangle with. This can be "none" (for a transparent rectangle interior) or a colour or even gradients and other things (which we'll get to in later tutorials). For now, it's easiest to stick to a colour, colours in SVG are more fully explained on the next page.
- rx,ry - This allows us to make a rectangle with rounded corners. rx gives the x-radius of the rounding and rx gives the y-radius. By definition, rx must be less than or equal to the width of hte rectangle and ry must be less than or equal to the height of the rectangle. For perfectly rounded corners, make these numbers the same and non-zero. For sharp corners, omit these attributes (or set them to zero).
The following is a SVG image of two rectangles, one with no interior and a thick coloured outline and one filled with a colour, no outline and rounded corners. You should be able to right-click on the image to view the SVG source (results will vary depending on your browser).
Circle (Expand)
We briefly looked at the <circle> element in our first tutorial. Here we showcase some of the attributes of a circle element:
- cx,cy - the coordinates of the center of the circle
- r - the radius of the circle
- stroke - What to outline the circle with. See the Rectangle section above.
- stroke-width - How thick to make the border of the circle.
- fill - What to fill the circle with. See the Rectangle section above.
The following is a SVG image of a circle with a border and a fill. You should be able to right-click on the image to view the SVG source.
Ellipse (Expand)
An ellipse is just a fancy word for 'oval'. It has a center point like a Circle, but it has two radii, one in each of the x- and y- directions:
- cx,cy - the coordinates of the center of the ellipse
- rx,ry - the x- and y-radius of the ellipse. For a perfect circle, set these attributes to be identical.
- stroke - What to outline the ellipse with. See the Rectangle section above.
- stroke-width - How thick to make the border of the ellipse.
- fill - What to fill the ellipse with. See the Rectangle section above.
The following is a SVG image of an ellipse with a border and a fill. You should be able to right-click on the image to view the SVG source (results will vary depending on your browser).
Line (Expand)
A simple line segment from Point A to Point B. Lines cannot be filled, they can only be stroked.
- x1,y1 - the coordinates of Point A
- x2,y2 - the coordinates of Point B
- stroke - What to draw the line with. See the Rectangle section above.
- stroke-width - How thick to make the line.
The following is an example of a SVG line with stroke="blue". You should be able to right-click on the image to view the SVG source (results will vary depending on your browser).
Polyline (Expand)
A polyline is a series of connected line segments.
- points - a list of x,y coordinates. Each number can be separated by whitespace or commas. For instance: points="10,10 20,20, 30,10" defines a series of 3 points which results in two connected line segments. One segment from (10,10) to (20,20) and one segment from (20,20) to (30,10).
- stroke - What to draw the polyline with. See the Rectangle section above.
- stroke-width - How thick to make the polyline.
The following is an example of a SVG polyline with stroke="purple". You should be able to right-click on the image to view the SVG source (results will vary depending on your browser).
Polygon (Expand)
A polygon is any shape with 3 or more sides. A polygon is very similar to a Polyline except that the final line segment is automatically joined to the first line segment, thereby closing the shape/path. Polygons can be filled.
- points - a list of x,y coordinates. See the Polyline section above.
- stroke - What to outline the polygon with. See the Rectangle section above.
- stroke-width - How thick to make the border of the polygon.
- fill - What to fill the polygon with. See the Rectangle section above.
The following is an example of a SVG polygon (a triangle) with stroke="black" and fill="cyan". You should be able to right-click on the image to view the SVG source (results will vary depending on your browser).
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:
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" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="400" version="1.1" viewBox="0 0 300 400"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/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" />
</svg>
I'd like to comment on a couple things with the butterfly SVG code:
- I have labelled each SVG entity using the standard "id" attribute (same as HTML and other XML grammars). This is almost always a good idea as it will: a) allow a reader to intuitively understand what portions of the SVG code are (without extensive use of comments) and b) give you an easy means to get a reference to the entity (i.e. through the JavaScript method document.getElementById(), more on that in future tutorials).
- I have also used the <title> and <desc> SVG elements to help describe my file. This can be very important since search engines like Google now index SVG content and scan these two elements to describe your content to the world.
- It is a good idea to use comments where they make sense both to remind yourself and explain things to readers of your code. As in HTML and other XML grammars, comments are anything embedded in between "<!--" and "-->".
- Order matters. As mentioned in the first tutorial, SVG has a "painters model". Each portion of the SVG image can overlap parts of the image that have already been painted. This means that the body ellipse needs to be rendered first before before the head circle (otherwise the head would be "under" the body). The order in which I put the SVG elements in the file dictates the order in which they are "painted". Note that I put "painted" in quotes here because a smart SVG rendered may not actually paint each individual piece before rendering the next element. Instead a smart SVG renderer may determine which portions of the screen are obscured by higher up elements and then not render those portions to optimize its rendering routine.
<<<Prev: 2. Serving Up A Slice of SVG Pie Next: 4. Colour Me Stupid>>>