Basic Shapes and Text in SVG

This chapter is from the book 

It's said that a picture is worth a thousand words, but in SVG, words are pictures! The art of drawing in SVG can be quite easy, because SVG has a number of basic shape elements. This means that you don't have to re-invent the wheel (or the circle!) every time you want to create a new image.

By covering all the basic shape elements, this chapter will show how to create simple images in SVG without a lot of coding. We'll also examine how easy it is to make images with basic shapes that can be reused in a variety of different drawings.

We'll also take a look at text and how to format it, including fonts, character spacing, and text layout. We'll take a brief look at internationalization, one of the advantages of SVG's XML-based code. So get out your drawing pads (or should we say, get out your text editors)!

Shape Elements

SVG has several built-in shape elements. They are:

• <rect>—Rectangle

• <circle>—Circle

• <ellipse>—Ellipse

• <line>—Straight line

• <polyline>—Open shape consisting of straight line segments

• <polygon>—Closed shape consisting of straight line segments

The coding of shape elements looks exactly like other elements we've seen so far with opening and closing tags. Like any element, they contain attributes that further define the shape. The best way to learn about SVG's shape elements is to see them in action, so let's create a simple picture, using common shapes.

The <rect> Element

Let's begin with the <rect> (rectangle) element. We've already seen it in some of our earlier chapters, but now we'll take a closer look.

The <rect> element creates a rectangular shape in the viewport. We have explored some of the common attributes of this element (the width and height attributes) but Table 3–1 shows other attributes that a <rect> element can possess.

TABLE 3–1 The <rect> Element and Attributes

Element	Attribute	Description
<rect> (Rectangle)	X	Defines x coordinate position of upper left corner of <rect> element
	Y	Defines y coordinate position of upper left corner of <rect> element
	rx	For rounded rectangles, defines the x axis radius of the ellipse that rounds the corner of the rounded rectangle
	ry	For rounded rectangles, defines the y axis radius of the ellipse that rounds the corner of the rounded rectangle
	width	Defines width of <rect> element
	height	Defines height of <rect> element

This table shows familiar attributes, such as width and height, and a couple of new attributes, the rx and ry. These new attributes create rounded rectangles. Take a look at the image in Figure 3–1 to see an example of a rectangle with sharp corners and a rectangle with rounded corners.

FIGURE 3–1 Sharp and rounded rectangles.

Using an rx and ry value of 20 on the internal rectangle allowed the rounded corners. To visualize how SVG accomplishes this rounding, think of an ellipse with x and y radii of 20 (really a circle, because the x radius and the y radius are the same in this case) superimposed on the corner of the rectangle, as in Figure 3–2.

FIGURE 3–2 Elliptical rounding. Rounded rectangle rx and ry values define rounding radii.

In Figure 3–2, we zoomed in on a corner of a rounded rectangle with an ellipse superimposed to show the rounding radii. The ellipse has x and y axis radii of 20, and the rounded rectangle has rx and ry values of 20.

Example 3–1 shows the code for Figure 3–1, the image with the sharp and rounded rectangles.

Example 3–1 sharpRoundRect.svg:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="400" height="400">

<rect x="5" y="5" width="390" height="390" 
style="fill:none; stroke:#555; stroke-width:3"/>

<rect x="50" y="50" rx="20" ry="20" width="300" height="300" 
style="fill:none; stroke:rgb(102,102,102); stroke-width:10"/>

</svg>

The first <rect> element in the code in Example 3–1 creates the outer rectangle. It has no rx and ry values; therefore, its corners are sharp. The second <rect> element creates the inner rectangle, with rounded corners. Note the rx and ry values.

It's not necessary to supply both the rx and ry values to create a rounded rectangle. If there is only an rx value, the SVG viewer will assume the same value for the ry attribute. Similarly, if you supply an ry value, SVG will assume the same rx value. In other words, <rect rx="20"> is the same as saying <rect rx="20" ry="20".

The rx and ry values in a rounded rectangle don't have to be the same number. If the code is changed for the second <rect> element in Example 3–1 to read as follows:

<rect x="50" y="50" rx="20" ry="40" width="300" height="300" 
style="fill:none;stroke:rgb(102,102,102);stroke-width:10"/>

with the rx value at 20 and the ry value at 40, it will render like the image in Figure 3–3, though you have to look closely to see it.

FIGURE 3–3 Rounded rectangle with unequal rx and ry values.

A <rect> element with an rx value greater than the ry value will produce an entirely different effect.

In general, the greater the rx and ry value, the rounder the corners will appear on the rectangle. Conversely, smaller numbers will produce less rounding.

No style attribute is included in Table 3–1 but the <rect> element (and all shape elements) for the most part use the style attribute to define the look of the shape. The style attribute has a range of values that define numerous characteristics having to do with the presentational aspects of an image. Listed in Table 3–2 are some style attributes that have to do with filling and stroking (coloring the inside and outside of) shapes, issues that fit our immediate needs. We'll see more style attribute values as we continue in this book. We are showing only fill and stroke style values here.

TABLE 3–2 Some Common Style Attribute Values (Fill and Paint Properties)

Value	Options*	Description	Default Behavior
opacity	Numerical value from 0 to 1	Controls the overall opacity of the object it is applied to	If no opacity value is specified, SVG will render the object as opaque.
fill:	RGB or hexadecimal values, as well as SVG color key words	The color that "paints" the inside of a shape	If no fill is defined for a shape, SVG will render the fill as black.
fill-opacity:	Number from 0 to 1, with 0 being totally transparent and 1 being totally opaque	Defines the opacity of the fill	If no fill-opacity is defined for a shape, SVG will render the fill as opaque.
fill-rule:	nonzero or evenodd	Defines how the inside of a shape will be determined; used for creating shapes that have "cut-out" effects	If no fill-rule is defined, the default is nonzero.
stroke:	RGB or hexadecimal values, as well as SVG color key words	Colors the outline of a shape	If no stroke is defined, the shape will not be outlined.
stroke- width:	Number value in pixels	Defines how wide the stroke will be	If no stroke-width is defined, the stroke will be 1 pixel wide.
stroke- opacity	Number from 0 to 1, with 0 being totally transparent and 1 being totally opaque	Defines the opacity of the stroke	If no stroke-opacity is defined for a shape, SVG will render the stroke as opaque.
stroke- dasharray	none, or list of numbers that specify the lengths of alternating dashes and gaps. (Example: stroke-dasharray: 5,3,2,7). Each length is in pixels.	For dashed outlines; controls the pattern of dashes and gaps in the outline	If no stroke-dasharray is defined for a shape, the stroke will render as continuous.
dashoffset	Number value	Specifies the distance into the dash pattern to start the dash	If no stroke-dashoffset is defined, the value is 0.
stroke- linecap	butt, round, or square	Defines the ending shape of a stroke	If no stroke-linecap is specified, SVG will use the "butt" option as a default.
sroke- linejoin	mitre, round, or bevel	Defines how strokes join at corners	If no stroke-linejoin is specified, SVG will use the "mitre" option as a default.
stroke- mitrelimit	Number value	If mitre is specified on the stroke-linejoin value, stroke-mitrelimit defines a limit to the length of the mitre so that it won't extend too far beyond the thickness of the lines that are joined	If no stroke-mitrelimit is specified, SVG will set the mitrelimit to 4.

The style attribute has more values than we list in Table 3–2, but it is a handy reference for the styles that we'll be using to color our basic shape elements. For a complete list of style attributes, see Appendix B.

Creating an SVG Image—Part 1

In Example 3–2, we're going to use the <rect> element to render an image that uses some of the basic shape elements. The first part will have a rounded rectangle, and other shapes will be added on.

Open a text editor, such as Notepad for Windows or BBEdit for Macs, and type in the following simple SVG file, complete with prolog (XML declaration and DTD reference) and root SVG element.

Example 3–2

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="400" height="400">
</svg>

We'll add a rounded rectangle with position and dimensions of x="50" y="50" rx="20" ry="20" width="300" height="300" and the style attributes of "fill:rgb(0,3,51); fill-opacity:.75; stroke:#666; stroke-width:10"/>. The code now is shown in Example 3–3.

Example 3–3

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="400" height="400">

<rect x="50" y="50" rx="20" ry="20" width="300" height="300" style="fill:rgb(0,3,51);
fill-opacity:.75;stroke:#666; stroke-width:10"/>

</svg>

Save the code (make sure to save it with an .svg file extension) and view it in a browser. It should look like Figure 3–4.

FIGURE 3–4 blueRoundedRect.svg. Rounded rectangle.

Examine the style attribute in Example 3–3. There are four style values defining the rounded rectangle: fill, fill-opacity, stroke, and stroke-width. The fill-opacity value is a new attribute. It applies an opacity value to the fill only, leaving the stroke unaffected. In Figure 3–4, the inside of the rounded rectangle is set to .75, which makes it slightly transparent. The stroke value of the rectangle is not affected and is completely opaque.

Challenge 1

To feel comfortable with the <rect> element (or any other basic shape element), spend some time experimenting with the shape and its attributes.

1.1 Create a well-formed, valid SVG document.

1.2 Create a rectangle with:

• Rounded corners (equal or unequal rx and ry values)

• Semitransparent overall

• Semitransparent interior and opaque outline

• Semitransparent outline and opaque interior

• A dashed outline

The <circle> Element

The next shape element is the aptly named <circle> element. The <circle> element draws a circle based on a user-supplied center x and y coordinates and radius. Table 3–3 below shows the basic attributes of the <circle> element.

TABLE 3–3 The <circle> Element and Attributes

Element	Attribute	Description
<circle>	cx	Defines x coordinate position of center point of the circle
	cy	Defines y coordinate position of center point of the circle
	r	Defines radius of the circle

The <circle> element differs from the <rect> element in that it is positioned according to its center point and not according to its upper left corner. This makes sense, because a circle doesn't have an upper left corner! If you don't specify cx and cy values for a circle, SVG will set both values at the default of zero, which will result in the center point of the circle being set at the upper left corner of the viewport.

The r attribute defines the radius of a circle. As always, these values are pixels by default, but it is possible to specify other user units.

In Figure 3–5, we added a circle to our rounded rectangle image. The circle has a fill color but not an outline, and it is opaque.

FIGURE 3–5 circleRect.svg. Circle added to rounded rectangle.

All we did was add a line of code to the code in Example 3–3.

<circle cx="200" cy="200" r="50" style="fill:rgb(196,233,187)"/>

This line of code comes just after the <rect> element and just before the closing </svg> tag.

This <circle> element is really simple. It has a fill color using only rgb values (take note of the syntax for using rgb values). There is no outline, no transparency, and no special effects. The circle is set in the center of the viewport, and it has a radius of 50 pixels.

To jazz up the circle, try some of the same experiments as with the <rect> element, such as adding some transparency, a dashed outline, etc. Often, the more you play, the more you'll discover. Try using different units of measure, such as inches or percentages.

The <ellipse> Element

An ellipse is basically a circle where the x radius and the y radius are different lengths. As such, the <ellipse> element is defined much like a circle is defined, but instead of defining an r (radius) length, as with the <circle> element, for an ellipse element you define both rx (radius of x axis) and ry (radius of y axis) lengths. We saw a bit of this when we looked at rounded rectangles.

Table 3–4 shows the <ellipse> element and its attributes.

TABLE 3–4 The <ellipse> Element and Attributes

Element	Attribute	Description
<ellipse>	cx	Defines x coordinate position of center point of the circle
	cy	Defines y coordinate position of center point of the circle
	rx	Defines x axis (horizontal) radius of the ellipse
	ry	Defines y axis (vertical) radius of the ellipse

Like the <circle> element, cx and cy values for an ellipse need to be defined, and the definitions will control where the center point of the ellipse is placed.

In Figure 3–6, an ellipse is added to the rounded rectangle document. It is placed on top of the circle.

This is a very simple planet Saturn design. Because SVG is two-dimensional, it is necessary to put the ellipse on top of the circle, but by making the ellipse's stroke color the same as the circle's fill color, the effect of having the ellipse superimposed on the circle is minimized. The resulting image is a very childlike version of Saturn and its rings.

Example 3–4 shows the code for SATURN.SVG thus far. The ellipse code that we added is in bold text.

FIGURE 3–6 SATURN.SVG. Ellipse added to rounded rectangle and circle.

Example 3–4 SATURN.SVG

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="400" height="400">

<rect x="50" y="50" rx="20" ry="20" width="300" height="300" style="fill:rgb(0,3,51);
fill-opacity:.75;stroke:#666; stroke-width:10"/>

<circle cx="200" cy="200" r="50" style="fill:rgb(196,233,187)"/>
<ellipse cx="200" cy="200" rx="100" ry="20" 
style="fill:none;stroke:rgb(196,233,187);stroke-width:15"/>

</svg>

The ellipse has an rx value of 100 and an ry value of 20, which makes it wider than it is tall. The interior of the ellipse is not filled because we wanted a ringlike effect. (Notice that, to keep the shape unfilled, it is necessary to specify fill:none, because the default fill is black.) The stroke color is the same rgb value as the fill of the circle, and the stroke has a width of 15 to make it wide enough to resemble a ring.

The <polygon> Element

Now we need something simple to create with the <polygon> element. How about stars? The <polygon> element creates closed shapes with straight line segments, so the <polygon> element is perfect for creating a star shape.

The <polygon> element is less predetermined than the shapes we've seen so far. It can have as many sides as necessary, and it can be any shape, as long as it is made up entirely of straight line segments. A <polygon> element must also be a closed shape, so that it can't be just an open-ended series of lines. Figure 3–7 below shows three polygon shapes.

FIGURE 3–7 Polygons.

Figure 3–7 has three different shapes, all created with the <polygon> element. The <polygon> element takes a series of points and plots them on the coordinate system, then draws lines between the points to make a shape. The <polygon> element will always close a shape, so it will always supply a line from the last point supplied back to the starting point in order to close a shape.

Example 3–5 shows the code for the leftmost polygon in Figure 3–7. This is the figure with the "cut-out" shape in the middle of the pentacle.

Example 3–5

<polygon points="120,158 177,46 203,166 111,86 230,97"
style="fill:blue; fill-rule:evenodd;
stroke:rgb(0,0,0);stroke-width:1"/>

Notice that, unlike previous shape elements, the <polygon> element is shaped and positioned by using the points attribute. The points attribute takes a series of xy coordinates and plots them on the coordinate system. In Example 3–5, the first pair of numbers (120,158) are the xy coordinates of the starting point. A line is then drawn to the second pair of xy coordinates (177,46), then to the third pair of xy coordinates (203,166), and so on, to create the five-pointed star shape in Figure 3–7. Because this is a <polygon> element, SVG will automatically draw a line from the last point you give it (in Example 3–5, that is xy coordinates 230,97) to the starting point (in Example 3–5, the xy coordinates 120, 158) to close the shape.

Take a closer look at the cut-out effect in Figure 3–7. Notice a new style value we haven't used yet, the fill-rule value. In Table 3–2 we see that the fill-rule value controls how the inside of shapes are painted if the polygon has intersecting lines, such as in the leftmost shape of Figure 3–7.

The fill-rule value provides a method of determining what is inside and what is outside a shape and, therefore, what gets painted (the inside) and what does not get painted (the outside) with the fill property. Fill-rule has two options, nonzero and evenodd. The evenodd option determines what is inside the shape by drawing a line from the area in question to infinity, then counting the number of times the line crosses the polygon's lines. If the total number of crossings is even, the area is "outside" the shape and does not get painted with fill color. If the number is odd, the area in question is "inside" the shape and, therefore, gets painted with the fill color.

This may sound somewhat confusing but it helps to take a look at the pentacle shape on the leftmost side in Figure 3–7. Notice that the area in the middle of the star is not filled. If you were to draw a line from the blank area of the pentacle to infinity, that line would cross two lines of the pentacle shape in any direction drawn. Therefore, the blank area in the middle of the pentacle is considered "outside" the pentacle and does not get filled in. Conversely, draw a line from the interior of the filled parts of the pentacle to infinity (in any direction). This results in an odd number, which puts those areas "inside" the polygon and fills them accordingly.

The nonzero rule simply counts the times a line drawn from an area to infinity crosses a polygon's lines and adds one if the line is going from right to left. Conversely, it subtracts one if the line is going from left to right. If the total is zero, the area will be "outside" the polygon and, therefore, unfilled. If the total is nonzero, the area will be considered "inside" the polygon and will be filled.

Experiment with both options to see whether you get the effect you want. Remember, these options are useful for polygon shapes where the lines intersect each other only. Otherwise, why bother? You'd just fill or not fill a shape with no intersecting lines!

We're going to add a star shape or two to the SATURN.SVG file by defining a polygon and reusing it a couple of times.

Example 3–6 shows the code for creating the polygon shape. Notice that it is enclosed in a <g> element and given an id name.

Example 3–6

<g id="star">

<polygon points="254,127 256.054,132.203 261.403,130.565 
  258.616,135.415 263.231,138.576 257.702,139.421
  258.108,145 254,141.203 249.892,145 250.298,139.421
  244.769,138.576 249.384,135.415 246.597,130.565
  251.946,132.203" style="fill:rgb(255,255,192);
  stroke:none"/>

</g>

The above code defines a small, seven-pointed star with a very light yellow fill and no outline. If this code is added to the SATURN.SVG file before the closing </svg> tag, it will resemble Figure 3–8.

FIGURE 3–8 Star added to SATURN.SVG (renamed SATURN02.SVG).

Now that's looking better. But adding more stars will make the sky less lonely. Notice the <polygon> element in a <g> element for reuse. Simply add another star (or stars) by adding <use> elements before the closing </svg> tag. Reference the star group by the name ("star") and place it by giving it different x and y coordinates. If it doesn't have different coordinates, it will land on top of the original star.

Add two lines of code at the end to add two more stars to SATURN.SVG.

<use xlink:href="#star" x="-75" y="150"/>
<use xlink:href="#star" x="-95" y="120"/> 

The result is shown in Figure 3–9.

Chapter 2 discussed the <defs> element and emphasized reusable code being put into <defs> elements. Let's do the same.

FIGURE 3–9 Stars added to SATURN.SVG.

Enclose the <g> element inside a <defs> element and call up the <g> element with the <use> element. Remember, if you enclose a <g> element within a <defs> element, the <g> element won't show up in the viewport unless you reference it with <use>. So to get three stars, write three <use> elements.

Example 3–7 shows the code for the final saturnDefs.svg file.

Example 3–7

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="400" height="400">

<rect x="50" y="50" rx="20" ry="20" width="300" height="300" style="fill:rgb(0,3,51);
fill-opacity:.75;stroke:#666; stroke-width:10"/>

<circle cx="200" cy="200" r="50" style="fill:rgb(196,233,187)"/>
<ellipse cx="200" cy="200" rx="100" ry="20" 
style="fill:none;stroke:rgb(196,233,187);stroke-width:15"/>

<defs>
<g id="star">
  <polygon points="254,127 256.054,132.203 261.403,130.565
  258.616,135.415 263.231,138.576 257.702,139.421 258.108,145
  254,141.203 249.892,145 250.298,139.421 244.769,138.576
  249.384,135.415 246.597,130.565 251.946,132.203"
  style="fill:rgb(255,255,192);stroke:none"/>

</g>

</defs>

<use xlink:href="#star"/>
<use xlink:href="#star" x="-75" y="150"/>
<use xlink:href="#star" x="-95" y="120"/> 

</svg>

To make SATURN.SVG into a streamlined, modular file, enclose the circle and ellipse together into a <defs> element, then reuse the Saturn image. The same thing will work for the rounded rectangle, which is the frame of the image.

Challenge 2

2.1	Start with SATURN.SVG (or any SVG file you wish).
2.2	Make each part of the image reusable, (e.g., star shape, planet shape, frame) by using the <defs> element.
2.3	Write <use> elements to reference the different shapes. Experiment with different placement. Remember that, when defining a shape, often you define placement within the shape element (for example, cx and cy place a circle, x and y place a rectangle, points place a polygon). Figure out how to design shapes for easy placement with the <use> element. (Hint: It is easy to define a <rect> element with x and y coordinates of (0,0) within a <defs> element, then place it with the <use> element. However, it isn't so easy with a <polygon> element unless the starting point is 0,0.)

The <polyline> Element

Like the <polygon> element, the <polyline> element is made up of straight line segments. Unlike the <polygon> element, <polyline> describes an open shape, not a closed one.

The <polyline> element is defined by using a series of points, just like <polygon>. However, <polyline> does not automatically close the shape. The last point in the <polyline> element is the end of the shape. If you want to close a polyline, you must manually add a point at the end equal to the starting point.

Figure 3–10 shows a drawing created with the <polyline> element.

FIGURE 3–10 POLYLINE.SVG.

The polyline in Figure 3–10 is unfilled. The polyline is composed of the code in Example 3–8.

Example 3–8

<polyline
points="9,197 9,153 33,153 33,197 62,197 62,107 78,108
78,81 96,81 96,110 96,200 118,200 118,119 140,119
140,149 170,149 170,66 194,66 194,88 207,88 207,120
240,120 240,151 259,151 259,92 276,68 293,93 293,152"
style="fill:none;stroke:rgb(0,0,0);stroke-width:3"/> 

Again, like a polygon, the numbers in the points attribute refer to xy coordinates. The first number (9,197) is the starting point, and straight line segments are drawn to each successive point. The <polyline> ends with the point defined by the last pair of xy coordinate numbers (239,152, in this case).

A polyline shape can be closed by making the last point the same as the first point. A polyline can also be filled, but sometimes it won't look the way you expect. In Figure 3–11, a fill value is added to the polyline in Example 3–8.

FIGURE 3–11 Polyline with fill (polylineFill.svg).

Generally, you would use the <polyline> element for open, unfilled shapes.

The <line> Element

The last (and the simplest!) of the basic shape elements is the <line> element. The <line> element describes a straight line segment that starts at one user-defined point and ends at another. Table 3–5 shows the line element and its attributes.

TABLE 3–5 The <line> Element and Attributes

Element	Attribute	Description
<line>	x1	Defines x coordinate position of the beginning of the line
	y1	Defines y coordinate position of the beginning of the line
	x2	Defines x coordinate position of the end of the line
	y2	Defines y coordinate position of the end of the line

Figure 3–12 shows several line elements with different stroke-width values.

FIGURE 3–12 Line elements.

The code listing in Example 3–9 produced the results in Figure 3–12.

Example 3–9

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="300" height="300">

<line x1="100" y1="100" x2="200" y2="100" style="stroke:black; stroke-width:1"/>
<line x1="100" y1="120" x2="200" y2="120" style="stroke:black; stroke-width:3"/>
<line x1="100" y1="140" x2="200" y2="140" style="stroke:black; stroke-width:5"/>
<line x1="100" y1="160" x2="200" y2="160" style="stroke:black; stroke-width:10"/>

</svg>

The <line> element starts drawing a straight line segment at the coordinates supplied in the x1 and y1 attributes, and ends the line at the coordinates supplied in the x2 and y2 attributes. In Example 3–9, the lines started and ended at the same x coordinate, but they have different y coordinates to create the series of horizontal lines seen in Figure 3–12.

Shape Element Summary

Table 3–6 shows all the basic shapes and their attributes.

TABLE 3–6 Shape Elements and Attributes

Element	Attributes	Description
<rect> (rx, ry for rounded rectangle)	x, y, width, height	Draws a rectangular shape with upper left corner at user-defined xy coordinates and user-defined width and height
<circle>	cx, cy, r	Draws a circle with user-defined center point coordinates (cx cy) and a user-defined radius (r)
<ellipse>	cx, cy, rx, ry	Draws an ellipse with user-defined center point coordinates (cx, cy) and user-defined x and y axis radii (rx, ry)
<polygon>	points	Draws a closed shape consisting of straight line segments plotted with user-defined points (will close the shape automatically)
<polyline>	points	Draws a shape (usually an open shape) consisting of straight line segments plotted with user-defined points (does not close the shape automatically)
<line>	x1, y1, x2, y2	Draws a straight line segment starting at user-defined coordinates (x1, y1) and ending at user-defined coordinates (x2, y2)

Most famous logos are created from some pretty basic shapes! Now you, too, can create those shapes.