Adding Shapes
SVG has definitions for circles, ellipses, and even irregular polygons. We need
a square, and we’ll use the <rect> tag for that. To create a square, we specify
the starting coordinates and the width and height.html5_svg/index.html
<rectid="square"
x="20"y="20"height="20"width="20"
style="fill:rgb(255,0,0)"></rect>We define the stroke and fill just like we did with <polyline>, by specifying it
with the style attribute. Our logo is shaping up:All we have left is the small white triangle.
Freehand Drawing with Paths
We could use the <polygon> tag to define a triangle, but instead we’ll use a
path like we did when we drew the original triangle on the <canvas> version
of this logo. The approach is actually quite similar, except we have to specify
all of the movements and points as a single array of coordinates separated
by spaces rather than a series of steps. It’s similar to how we defined the
<polyline> earlier.We use the d attribute to define how to draw the line. We start by defining
the starting point of our line, and then we draw each point on our line. Since
we’re doing a triangle, we’re going to end up where we started so we can
connect the last point to the first point. Here’s the code:html5_svg/index.html
<pathid="Triangle"
d="M20,40L30,20L40,40Z M20,40"
fill="rgb(255,255,255)"></path>We use M to move the origin. We use L to specify a point on the line, and we
use Z to close the path, which means we’ve connected the starting point to
the endpoint so that its contents can be filled. Just think of it like a game of
“connect the dots.” You move the pen to the first dot, then you draw a line to
the next one, and so on.And when we’re done, our finished logo looks like this:
Chapter 6. Drawing in the Browser • 128
Download from Wow! eBook <www.wowebook.com> report erratum • discuss