Building Web Applications with SVG - Cdn.oreilly.com

tip Until we introduce the full range of graphical primitives, we will restrict
the drawing to circles, ellipses, and rectangles, all of which are somewhat selfexplanatory
once you see the syntax.
In this case, it appears that there are three objects: a circle (that very much resembles our
earlier one), an oval (called an ellipse in SVG), and a rectangle.
3. Identify the order in which the objects are drawn. The front-most object appears to be the
ellipse, and its yellowish fill pattern appears slightly transparent, because you can see through
it to the objects behind it. From back to front (which coincides with the order in which the
objects will be drawn), there appears to be a circle, then a rectangle, and finally an ellipse. It’s
important to note that the topmost object (the ellipse) is transparent in its interior but not its
boundary.
4. Determine whether the objects seem to be drawn using relative values (percentages) or absolute
values (pixels) for their geometric attributes.
You may find it useful to view the drawing on the web, where you can see how the drawing
is affected by resizing the browser. You can find the drawing here: http://granite.sru
.edu/~ddailey/svg/lesson3.svg.
In this case, it makes sense to begin with the assumption that the geometry has been drawn
relative to the window size for three reasons: because the circle seems to be the same as in the
second exercise (which used relative values for its geometry), because the rectangle’s top line
seems to coincide with the center of the circle, and because the ellipse appears to share the
same center as the circle.
5. Start off with the same file you created at the end of the previous exercise, because it appears
that the two files share the same circle, and the objective illustration would involve placing
that circle beneath the other objects—which means earlier in the markup code.
Collage involving <rect> , <circle> and <ellipse>
The preceding code contains one additional line: a element. As an image format, SVG
has great potential to address issues of accessibility for visually impaired people, so it is best
to get in the habit of adding a title to all your documents. You’ll see more about accessibility
later in this book, because it is an important topic, particularly for SVG.
6. Add a light-blue rectangle on top of the circle and adjust its size, position, color, stroke, and
stroke width:
CHAPTER 1 SVG Basics 27