Last modified: Sunday, 06-Aug-2017 22:16:24 UTC. Maintained by: Elisa E. Beshero-Bondar (eeb4 at psu.edu). Powered by firebellies.

SVG Exercise 1

Your homework exercise is to draw a bar graph by hand in SVG to compare the sizes of three Pacific islands. (And since we’re thinking about Pacific islands, just for fun we’ve found an SVG map of Tahiti and Mo’orea to illustrate this page: Try resizing your browser window and watch as the map scales up and down!)

Here’s the data you need to graph--the areas in square miles of three Polynesian islands:

Tahiti 404 sq mi;
Raiatea 65 sq mi;
Tongatapu 100 sq mi

Here’s what you need to do:

First, open a new SVG file in <oXygen/>, by going to File, New, and typing SVG in the filter text window. From the list, choose SVG 1.1. You will see a simple empty SVG file that looks like this:
```
            <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <desc></desc>
    <g alignment-baseline="baseline">
    
    </g>
</svg>
```
You can just delete the empty <desc> element, or write a description of what you are graphing (up to you). The <g> element is not strictly necessary either, but it is simply used to group related parts of an SVG graphic, such as lines and text. You can write your SVG elements inside the <g> element. Save your file (using our standard homework naming file conventions) and view your work in making a graphic by opening it locally in a web browser. (You can also try looking at it in the "Author" view inside <oXygen/>, but it might not render completely there and will look better in a browser window.)
Make a bar graph that has an x axis and a y axis, using the SVG <line> element.
Now, make three bars of different colors using the SVG <rect> element. Experiment with size and scale of your bars for viewing on a web browser!
Finally, use the SVG <text> element to put labels on the axes or the bars to indicate the island names and the numerical values. Position text across the top to give your graph a title that indicates what we’re seeing: the relative size in square miles of three Pacific islands.

Read about how to work with the SVG <text> element, orienting text direction, setting font size, etc. For example, try making vertical text, and adjusting the spacing between letters. (Overall, we really like this site, Jakob Jenkov’s tutorial on SVG, as it seems better organized and more informative than the one at w3schools--but feel free to explore both!)

The Weirdness of the Y-Axis in SVG coordinate space

Remember, as we saw in class, in SVG the y-axis is upside-down! Low y-values close to zero sit near the top, and as y values increase, we move down the screen. This means that if you draw your chart using positive y values, the way you’d draw it on a sheet on graph paper, the bars will grow downwards instead of upwards, and their baseline will be at the top, not the bottom.

If you want to draw a vertical bar graph the usual way with the bottom along an x-axis, here’s a way you can do it: Say you want to graph two bars, one with a height of 25 and the other with a height of 50. Make rectangles with heights of 25 and 50, but set the shorter bar at a y position that’s 25 units MORE than the longer one. Try making your baseline be at 50, and run your long bar UP THE SCREEN to 0. Then make your short bar go from 50 up to 25. (This may be easier to visualize by drawing it on a piece of paper with a pencil, and labelling the values, realizing you’ve got to deal with the y-axis backwards.

We’ll eventually be handling this y-axis weirdness in other ways as we make SVG from XSLT, but for this exercise, just to learn your way around SVG, we’d like you to "hand-code" your graph this way.