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