# Connexions

You are here: Home » Content » If You Can Imagine It, You Can Draw It using SVG

### Lenses

What is a lens?

#### Definition of a lens

##### Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

##### What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

##### Who can create a lens?

Any individual member, a community, or a respected organization.

##### What are tags?

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

#### Affiliated with (What does "Affiliated with" mean?)

This content is either by members of the organizations listed or about topics related to the organizations listed. Click each link to see a list of all content affiliated with the organization.
• Featured Content

This module is included inLens: Connexions Featured Content
By: ConnexionsAs a part of collection: "Accessible Physics Concepts for Blind Students"

"Blind students should not be excluded from physics courses because of inaccessible textbooks. The modules in this collection present physics concepts in a format that blind students can read […]"

Click the "Featured Content" link to see all content affiliated with them.

Click the tag icon to display tags associated with this content.

### Recently Viewed

This feature requires Javascript to be enabled.

### Tags

(What is a tag?)

These tags come from the endorsement, affiliation, and other lenses that include this content.

# If You Can Imagine It, You Can Draw It using SVG

Module by: Richard Baldwin. E-mail the author

Summary: The study of physics is replete with requirements to create and analyze technical drawings. This is obviously more difficult for blind students than for sighted students. However, blind students can draw technical diagrams and the purpose of this module is to show you how. If you can imagine it, you can draw it using SVG.

## Preface

### General

This module is part of a collection of modules designed to make physics concepts accessible to blind students.

See http://cnx.org/content/col11294/latest/ for the main page of the collection and http://cnx.org/content/col11294/latest/#cnx_sidebar_column for the table of contents for the collection.

The collection is intended to supplement but not to replace the textbook in an introductory course in high school or college physics.

The study of physics is replete with requirements to create and analyze technical drawings. This is obviously more difficult for blind students than for sighted students. However, blind students can draw technical diagrams and the purpose of this module is to show you how. If you can imagine it, you can draw it using SVG.

### Prerequisites

In addition to an Internet connection and a browser, you will need the following tools (as a minimum) to work through the exercises in these modules:

The minimum prerequisites for understanding the material in these modules include:

### Viewing tip

I recommend that you open another copy of this document in a separate browser window and use the following links to easily find and view the figures and listings while you are reading about them.

#### Figures

• Figure 1 . Mirror image from the file named Svg21a1r.svg.
• Figure 2 . Non-mirror-image version of the image from the file named Svg21a1r.svg.

### Supplemental material

I recommend that you also study the other lessons in my extensive collection of online programming tutorials. You will find a consolidated index at www.DickBaldwin.com .

## Discussion

### Creation of tactile graphics

The module titled Manual Creation of Tactile Graphics at http://cnx.org/content/m38546/latest/ explains how to create tactile graphics from svg files that I will provide.

If you are going to have an assistant create tactile graphics for this module, you will need to download the file named Phy1002.zip , which contains the svg files for this module. Extract the svg files from the zip file and provide them to your assistant.

In each case where I am providing an svg file for the creation of tactile graphics, I will identify the name of the appropriate svg file and display an image of the contents of the file for the benefit of your assistant. As explained at http://cnx.org/content/m38546/latest/ , those images will be mirror images of the actual images so that your assistant can emboss the image from the back of the paper and you can explore it from the front.

I will also display a non-mirror-image version of the image so that your assistant can easily read the text in the image.

### What is SVG (Scalable Vector Graphics) ?

The shortest answer that I can come up with is that SVG is a technology that makes it possible for a blind student to create technical drawings. If the student can imagine it, the student can draw it using SVG and drawing tools that I will provide in this module.

According to Wikipedia

"Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated).

The SVG specification is an open standard that has been under development by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted and, if required, compressed.

Since they are XML files , SVG images can be created and edited with any text editor, but it is often more convenient to create these types of images with drawing programs such as Inkscape .

All major modern web browsers have at least some degree of support and render SVG markup directly, including Mozilla Firefox, Internet Explorer 9, Google Chrome and Safari. However, no earlier versions of Microsoft Internet Explorer (IE) support SVG natively."

That is where you will find technical specifications for the many capabilities that SVG has to offer. Those capabilities are vast. In this module, you will learn to create SVG files to draw the following basic shapes along with text:

• line
• rectangle
• circle
• ellipse
• polyline
• polygon

You will also learn how to manipulate certain aspects of the following attributes on those shapes and on the text that you create:

• stroke
• stroke-width
• stroke-opacity
• fill
• fill-opacity
• font-style
• font-weight

While this barely scratches the surface in terms of overall SVG capability, it does provide a set of tools that will put you in good stead relative to creating drawings for your science, technology, engineering, and mathematics courses.

### What does this mean to you?

Let me refer back to the most important statement so far in this document:

" Since they are XML files, SVG images can be created and edited with any text editor "

What this means is that if you can imagine a technical drawing in terms of objects created from the basic shapes listed above along with their attributes , and you can mentally organize the sizes and positions of those objects in a drawing, you can use a text editor to create an SVG file, which, in turn can be used to render the drawing on the screen or on paper.

Using the SVG file

Once the drawing exists in the form of an SVG file, it can be printed and submitted as part of an assignment. Also, if you have access to the necessary equipment or assistance, it can be turned into a tactile drawing for you and other blind students to explore by touch.

You can also use the file format converter at http://www.online-utility.org/image_converter.jsp to convert the file to other formats such as png and jpeg . This makes it possible for you to use the drawing for other purposes, such as conversion to sound using software that is available at http://www.seeingwithsound.com/winvoice.htm .

And last but not least, if you happen to have access to the IVEO learning system , the SVG files that you create can be used with that system to be explored by touch and sound.

Even though you may be blind or visually impaired and you may never have drawn anything in your life, don't let that stop you. If you can imagine it, you can draw it using SVG. My purpose in publishing this module is to help you develop that skill.

### Sample drawing

Before going any further, I am going to provide the SVG files for a sample drawing that I will discuss in detail later. Hopefully, you can ask your assistant to print the file named Svg21a1r.svg and create a tactile version of the drawing as described at http://cnx.org/content/m38546/latest/

Tactile graphics

The file named Svg21a1r.svg contains a mirror image of the image that I created for this discussion. You should have downloaded that file earlier . Figure 1 shows the mirror image that is contained in that file for the benefit of your assistant who will create the tactile graphic for this discussion.

Figure 2 shows a non-mirror-image version of the same image.

This image contains only one line of text. It reads "Friction free table" and appears on the side of a table. Therefore, I didn't provide a key-value table as described at http://cnx.org/content/m38546/latest/

What does the image show ?

Just in case you were unable to get a tactile version of the image, I will describe it to you. It isn't very complicated.

There are three objects connected together with a cord. Two of the objects, each of which has a square shape, are setting on top of a table. The left end of the table is attached to a wall. The right end of the table is supported by a table leg.

The leftmost object on the table is tied to the wall. The two objects on the table are tied to one another.

The third object is shaped like a triangle. It is connected to the rightmost square object with a cord, but it is not setting on the table. Instead, there is a pulley wheel connected to the rightmost corner of the table. The triangular object is hanging from the cord, which threads up and over the pulley wheel and connects to the rightmost square object, which is to the left of the pulley wheel.

A label on the table reads "Friction free table."

Straight lines, rectangles, circles, and polygons

As you may have observed from the description, this drawing is made up entirely of straight lines, rectangles, a polygon for the triangle, and a circle for the pulley wheel. This is representative of many of the drawing used to illustrate physics concepts.

This drawing uses all of the basic shapes described earlier except for the ellipse and the polyline. Different line thicknesses were used to visually differentiate the objects from one another.

Processing an SVG file

An SVG file can be processed using an SVG processor, such as IE 9 or Firefox 5 to convert the commands contained in the SVG file into a drawing. If you are using a browser as your SVG processor, the drawing will appear in the browser window, from which it can be viewed and/or printed.

In addition, some products, such as Inkscape and the IVEO learning system can read the SVG file directly and use it to provide additional benefits such as converting text labels and shapes into spoken words and displaying the drawing in tactile form using an embossing graphic printer.

Also, as mentioned earlier , you can convert the SVG file to other formats, such as png and jpeg for use with other programs such as The vOICe Learning Edition .

### Two approaches

There are at least two approaches for using SVG to create a drawing like this:

• writing raw SVG code
• using drawing tools

#### Writing raw SVG code

As mentioned earlier, the contents of an SVG file are plain text. That text can be produced using any plain text editor, such as Windows Notepad.

If you are willing to study the specifications at http://www.w3.org/TR/SVG/ , you can use your text editor to create raw SVG code and accomplish everything that is possible using SVG. However, that can be a daunting task.

Listing 1 shows the raw SVG code that produced the image shown in Figure 2 . You might conclude that you don't want to spend your time writing text like that when you should be studying physics concepts instead.

##### Listing 1: Raw SVG code for Figure 2.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="990" height="765">
<title>Document Title</title>
<rect fill="none" stroke="black" stroke-width="3"
x="1" y="1" width="987" height="762">
<title>rectangle</title>
</rect>
<line stroke="black" stroke-width="9"
x1="45" y1="720" x2="945" y2="720">
<title>line</title>
</line>
<line stroke="black" stroke-width="9"
x1="90" y1="720" x2="90" y2="90">
<title>line</title>
</line>
<rect fill="none" stroke="black" stroke-width="3"
x="90" y="405" width="630" height="90">
<title>rectangle</title>
</rect>
<rect fill="none" stroke="black" stroke-width="3"
x="585" y="495" width="45" height="225">
<title>rectangle</title>
</rect>
<rect fill="none" stroke="black" stroke-width="5"
x="180" y="225" width="180" height="180">
<title>rectangle</title>
</rect>
<rect fill="none" stroke="black" stroke-width="5"
x="450" y="225" width="180" height="180">
<title>rectangle</title>
</rect>
<polygon stroke="black" stroke-width="5" fill="none"
points="675 675 855 675 765 540 ">
<title>polygon</title>
</polygon>
<rect fill="none" stroke="black" stroke-width="5"
x="709" y="346" width="35" height="95">
<title>rectangle</title>
</rect>
<circle fill="none" stroke="black" stroke-width="5"
cx="725" cy="355" r="41">
<title>circle</title>
</circle>
<line stroke="black" stroke-width="3"
x1="90" y1="315" x2="180" y2="315">
<title>line</title>
</line>
<line stroke="black" stroke-width="3"
x1="360" y1="315" x2="450" y2="315">
<title>line</title>
</line>
<line stroke="black" stroke-width="3"
x1="630" y1="315" x2="725" y2="315">
<title>line</title>
</line>
<line stroke="black" stroke-width="3"
x1="765" y1="360" x2="765" y2="540">
<title>line</title>
</line>
<text fill="black" stroke="black"
x="225" y="468" font-size="32" font-family="arial">
Friction free table.
</text>
</svg>


Although the concepts involved in manually writing SVG code aren't complicated, the process is very tedious and you are very likely to make errors in the coding process.

#### Using drawing tools

Fortunately for sighted students, drawing tools are readily available that make the creation of SVG drawings relatively easy. One of the best is the free open source SVG graphics editor named Inkscape . Sighted students are able to use that editor with the mouse and the keyboard to create drawings in a visual drawing environment.

I use Inkscape all of the time to create SVG files for the drawings that I need. However, I don't know of any blind students that have attempted to use Inkscape . It doesn't look to me like it would be very accessible for blind students. However, it is free, so you should give it a try just so you will know for sure.

SVG drawing editors for blind students

I am unaware of any SVG drawing editors that are designed for use by blind students who are unable to use a mouse. (If you know of any, please let me know.) Therefore, I will provide an SVG graphics library that I have designed specifically for blind students in this module. It isn't Inkscape ; far from it. However, it does not require the use of a mouse and it works well. It is my hope that the use of my library will make it possible for you to use SVG to draw the diagrams that you need to successfully pursue your coursework in physics and other technical areas.

Seeking improvements in the interface

There are a large number of excellent blind programmers scattered around the world. It is my hope that one or more of those programmers will pick up the challenge and develop an improved interface for the library that will make it even easier for blind students to draw using SVG.

I would like to see a JavaScript version of an SVG drawing editor designed for use by blind students. That's not because JavaScript is my favorite programming language, which it isn't. That is because JavaScript has the lowest barrier to entry of any programming environment that I am aware of. (See my JavaScript module at http://cnx.org/content/m37433/latest/ )

How does it work?

Basically what I will provide in this module is an SVG graphics library written in the Java programming language along with a template and instructions for you to use in writing Java programs to produce the drawings that you need.

I don't have a fancy interface to go with the graphics library. Instead, I will provide a template that you can use to write a new Java program for each new drawing. The procedure will be to write a program that encapsulates the drawing that you have in your mind. When you run the program, it will produce the SVG file that describes your drawing.

If you determine that there are errors in your drawing, you can make corrections to your program code and run it again to get a new version of the SVG file.

Raw SVG code versus my SVG graphics library

Only you can decide whether you prefer to write raw SVG code or you prefer to use the graphics library. I will present examples of both in this module.

I will point out one major advantage of using the library, however. Once you learn how to write Java programs that incorporate the library to create drawings, there is nothing to prevent you from expanding those programs to also solve physics problem and draw graphs of the results.

For example, suppose you have a physics assignment to compute and draw the trajectory of a projectile. Using raw SVG code, you would first need to compute and save the coordinates of the projectile as a set of incremental data points. Then you could write raw SVG code incorporating that data to draw the trajectory.

Using the library, you could write a program that would compute and also draw the trajectory in a single operation. In my opinion, that would be a much cleaner solution to the assignment.

### Sample program

A complete listing of the program named Svg21a.java , that was used to produce the drawing shown in Figure 2 is provided in Listing 25 near the end of the module.

This program requires access to the SVG graphics library in the file named SvgLib21.java . A complete listing of this program is shown in Listing 26 near the end of the module.

This program also requires access to the free Java Development Kit , version 6 or later, which I will also discuss later.

Finally, this program also requires access to JDOM 1.1.1 , which is free, and which I will also discuss later.

Purpose of the program

The primary purpose of this program is to demonstrate the use of my SVG graphics library in the file named SvgLib21 . It uses that library to draw an abbreviated version of a mass-pulley system shown in the module at http://cnx.org/content/m38211/latest/#Figure_4

The drawing in that module contains several lines of text. However, this program draws only one line of text. Otherwise, the drawing produced by this program is the same as the drawing used in that module titled Force and Motion -- Units of Force .

I created the original drawing using Inkscape . I created this drawing using my SVG graphics library and the program that I am about to discuss.

This program was tested using J2SE 6, JDOM 1.1.1, and Firefox 5 running under Windows Vista Home Premium Edition.

#### Beginning of the program named Svg21a.java

I will explain this program in fragments and explain how you can write similar programs to create the SVG drawing files that you need. The first fragment, which shows the beginning of the program, is shown in Listing 2 .

(Note that complete listings are provided in Listing 25 , Listing 26 , and Listing 27 . That code is ready to copy into your editor, save as Java source code files, compile, and run as explained under Writing, compiling, and running Java programs .)

##### Listing 2: Beginning of the program named Svg21a.java.

import java.io.*;
import org.jdom.*;

public class Svg21a{
public static void main(String[] args){

//DO NOT MODIFY ANY OF THE CODE ABOVE THIS LINE.
//##################################################//


Whenever you see the following character sequence, //, in a Java program, the text that follows to the end of the line is a comment. That is to say, that text is meant to provide information to a human reader and is ignored by the computer.

Listing 2 contains two comments. I will use many more comments in subsequent listings to help explain the code.

Java program files

Java programs are simply text files with the file name of your choice and an extension of .java. You can create those files using any plain text editor. I will explain later how you can "compile" those files to create executable programs.

If this were a module on computer programming, I would explain what is meant by the program code in Listing 2 . However, since this is not a module on computer program, I will simply tell you to replicate the text shown in Listing 2 at the beginning of your Java program file with one exception. That exception has to do with the name of the program and the name of the file.

The name of the program

The name of this program is Svg21a . You can see that name on the line following the word class in Listing 2 . You can use just about any name you want as long as the first character is a letter and the remainder of the name contains only letters and numbers. However, the name of the program, as shown in Listing 2 , must match the name of the file containing that program except that the file name must have an extension of .java.

For example, this program named Svg21a is stored in a file named Svg21a.java .

Also be aware that everything in Java, including program names and file names, is case sensitive. By that I mean that Joe is not the same as jOe, which is not the same as joE.

#### Create a drawing canvas

The next code fragment is shown at the top of Listing 3 . This fragment contains two Java programming statements.

(Usually Java program statements end with a semicolon.)

These must be the first two statements in your Java program and they must appear only once.

The first statement, down to the semicolon, creates the canvas on which the drawing will appear. You may modify this statement as explained below.

The second statement at the bottom of Listing 3 is a housekeeping statement and must not be modified.

##### Listing 3: Create a drawing canvas.

//ONLY THE CODE BELOW THIS LINE CAN BE MODIFIED

//CREATE A DRAWING CANVAS
//This must be the first statement that you write in
// the program and it must appear only once.
//The following statement creates a canvas that is
// 8.5x11 inches in size in a landscape layout.
Element svg = SvgLib21.makeSvg(ns,
"Document Title",
11,  //width
8.5  //height
);

//DO NOT MODIFY THE FOLLOWING STATEMENT
//This statement must immediately follow the call to
// the makeSvg method above and this statement MUST
// NOT BE MODIFIED.
Document doc = new Document(svg,docType);


What does this code mean?

The first statement shown in Listing 3 creates a canvas that is 8.5 x 11 inches in size in a landscape layout. In other words, the canvas has a width of 11 inches and a height of 8.5 inches. When you print the drawing produced on this canvas, it should fit perfectly on 8.5x11 inch paper provided that you tell the printer to print in landscape (as opposed to portrait) mode.

If your printer uses 8.5 x 11 inch paper, the only modification that you will want to make to this statement is to sometimes reverse the order of the width and height values (see the comments) to cause the canvas to accommodate portrait mode.

If your printer uses larger paper, you might want to modify the width and height values to accommodate the actual size of your printer paper.

When modifying the width and height values in the first statement, be careful not to delete the comma and DON'T MAKE ANY OTHER CHANGES to the statement with the possible exception of the "Document Title" parameter discussed below.

The Document Title

The makeSvg method, and most of the other makeZzz methods discussed below have a parameter that adds a title to the SVG element. These parameters have default values in this program such as "Document Title", "line", "rectangle", "circle", "ellipse", "polyline", and "polygon".

The purpose of these parameters is to provide compatibility with the speaking capability of the IVEO viewer .

If the output SVG file is opened in the IVEO viewer , the title for the svg element is spoken when the user opens the file.

The titles for the individual shapes are spoken by the IVEO viewer when the user touches a corresponding shape on the touchpad or clicks on that shape on the screen.

If the SVG file won't be used with the IVEO viewer , just leave the title strings unchanged. If the SVG file will be used with the the IVEO viewer , you can modify those strings to cause the viewer to speak whatever titles you choose. (Don't remove the quotation marks if you modify the title string.)

SVG code to create a canvas

If you were to delete all of the remaining code in Listing 25 down to but not including the statement that writes the output SVG file, the resulting SVG code would be that shown in Listing 4 .

##### Listing 4: SVG code to create a canvas.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="990" height="765">
<title>Document Title</title>


The width and the height of the canvas

The first three lines of text in Listing 4 constitute housekeeping information that you needn't worry about. It will always be the same.

The fourth and fifth lines of text in Listing 4 define the width and height of the canvas.

As you can see, the width is set to a value of 990 and the height is set to a value of 765.

The last line of text in Listing 4 is the title element discussed earlier .

SVG units

SVG doesn't inherently deal with dimensions in inches (although it is possible to specify inches when you define the value for a size attribute.) . Instead, it deals with dimensions in something that I will refer to as "SVG units", and for reasons that I am unable to explain, there appear to be 90 SVG units per inch or 35.43 SVG units per centimeter.

Thus, a width of 990 (as shown in Listing 4 ) corresponds to a width of 11 inches and a height of 765 corresponds to a height of 8.5 inches.

If you elect to write raw SVG code for you drawings, you will need to think in terms of SVG units instead of inches (or write all of the size attribute values something like "8.5in") . However, I designed my SVG graphics library so that you can think in terms of inches instead of SVG units without having to remember to specify the units for every size value.

#### Draw a rectangular border on the canvas

The Java code in Listing 5 draws a rectangular border on the canvas by creating an SVG element of type rect (for rectangle) .

##### Listing 5: Draw a rectangular border on the canvas.

//Draw a rectangular border on the canvas.
Element border = SvgLib21.makeRect(svg,
ns,
"rectangle",//title
0.015,/lower-left x-coordinate in inches
0.015,//lower-left y-coordinate in inches
10.97,//width in inches
8.47  //height in inches
);



What are you allowed to change?

There are only six things that you are allowed to change in the code in Listing 5 (pay attention to the comments) :

1. The name of the rect element, which is border in Listing 5 . (Later on, I will refer to this as an object instead of an element.)
2. The title for the element, which is "rectangle" in Listing 5 .
3. The x-coordinate of the lower-left corner of the rectangle, which is 0.015 inches in Listing 5 .
4. The y-coordinate of the lower-left corner of the rectangle, which is 0.015 inches in Listing 5 .
5. The width of the rectangle, which is 10.97 inches in Listing 5 .
6. The height of the rectangle, which is 8.47 inches in Listing 5 .

Multiple rect elements

You can replicate this code to define as many rect elements as you need in your drawing so long as you provide a unique name for each element (object) .

The size of the rectangle

If you carefully examine the values that I specified for the coordinates of the lower-left corner, the width, and the height, you will see that I made the rectangle slightly smaller than the size of the paper so that it will fit just inside the edges of the paper.

SVG code to draw a rectangle

The use of the Java code in Listing 5 to draw a rectangle results in the SVG code shown in Listing 6 .

##### Listing 6: SVG code to draw a rectangle.

<rect fill="none" stroke="black" stroke-width="1"
x="1" y="1" width="987" height="762">
<title>rectangle</title>
</rect>


In order to force the SVG code to fit in this publication format, it was necessary for me to insert a line break following the "1". Those two lines were originally a single line in the SVG code.

View my tutorials

SVG is simply one flavor of something called XML. I have published hundreds of online tutorials on Java programming, XML, and SVG. If you are interested in reading what I have to say in those tutorials, just Google the following keywords:

• Richard Baldwin Java
• Richard Baldwin XML
• Richard Baldwin SVG

The rect element

The four lines in Listing 6 that begin with an angle bracket followed by rect and end with /> constitute what is called an XML element named rect .

The rect element has a title element as its content. The title element has the word rectangle as its content.

The attributes of the rect element

The following items are known as the attributes of the rect element:

• fill
• stroke
• stroke-width
• x
• y
• width
• height

The attribute values

The text that appears in quotation marks, such as "762" are known as the values of the attribute to which they are joined by an equals character "=".

How does it all work?

When an SVG processor, such as the one incorporated into Firefox 5, sees an SVG/XML element named rect in an SVG file, it knows that it needs to draw a rectangle. It then looks to the attributes and their values to determine other aspects of that rectangle.

For example, in this case, the SVG processor is told to draw a rectangle consisting of an outline only (fill="none") .

The color of the outline is to be black (stroke="black") .

The thickness of the outline is to be a single SVG unit (stroke-width="1") .

The lower-left corner of the outline is to be very close to the origin when described in SVG units (x="1" and y="1") .

The width of the rectangle is to be 987 SVG units (width="987") , and the height of the rectangle is to be 762 SVG units (height="762") .

If you were to run the program at this point, open the output SVG file in Firefox 5, and print the result, you would have a blank sheet of paper with a black outline barely inside the edges of the paper. (Note, however, that on my system, there is a margin of approximately one-half inch at the bottom of the paper.)

#### Draw the floor and the wall

In the image shown in Figure 2 , the floor consists of a line parallel to the horizontal axis near the bottom of the drawing. The wall consists of a line parallel to the vertical axis near the left side of the drawing. The Java code in Listing 7 causes those two lines to be drawn.

(All coordinate values and dimensions given in this and the following Java code are in inches, so I will stop mentioning that at this point.)

##### Listing 7: Draw the floor and the wall.

//Draw the floor.
Element floor = SvgLib21.makeLine(svg,
ns,
"line",//title
0.5, //x-coordinate of one end of line
0.5, //y-coordinate of one end of line
10.5,//x-coordinate of other end of line
0.5  //y-coordinate of other end of line
);

//Draw the wall.
Element wall = SvgLib21.makeLine(svg,
ns,
"line",
1.0,
0.5,
1.0,
7.5
);


Two SVG elements of type line

Each of the Java statements in Listing 7 causes a new SVG element of type line to be created. The first element is named floor in the Java code. ( I will have more to say about element names later .) The second element is named wall . (See Listing 8 later.)

What can you change?

As before, there are only six things that you are allowed to change in each of the Java statements in Listing 7 :

• The names of the line elements (floor and wall in Listing 7 .)
• The values of the titles ("line" in Listing 7 .)
• The x and y coordinate values for one end of each line.
• The x and y coordinate values for the other end of each line.

If you examine the x and y coordinate values for one end of the line named floor in Listing 7 (0.5, 0.5) , you will see that one end of the line is near the origin at the lower-left corner of the drawing.

If you examine the x and y coordinate values for the other end of the line named floor (10.5, 0.5) , you will see that the other end of the line is near the lower-right corner of the drawing. Furthermore, both y-coordinate values are 0.5, meaning that the line is parallel to the horizontal axis as desired.

A similar analysis of the line named wall will reveal that it intersects the floor near the left end at (1.0, 0.5) and is parallel to the vertical axis.

SVG code to draw a line

Listing 8 shows the two line elements created by the Java code shown in Listing 7 .

##### Listing 8: SVG code to draw a line.

<line stroke="black" stroke-width="1"
x1="45" y1="720" x2="945" y2="720">
<title>line</title>
</line>

<line stroke="black" stroke-width="1"
x1="90" y1="720" x2="90" y2="90">
<title>line</title>
</line>


An explanation of element names

I promised earlier that I would have more to say about element names later. That time has come.

SVG elements don't have names, other than the name that defines the type of element such as rect ( Listing 6 ) and line ( Listing 8 ). Names such as border ( Listing 5 ), floor and wall ( Listing 7 ) are purely Java mechanisms for keeping track of the different elements in the drawing.

(I should have been referring border, floor, and wall as objects instead of elements in the Java code earlier, but I didn't want to make things even more confusing than they may already be.)

The names disappear

By the time the Java code is converted into SVG code, those identifying names have disappeared and the SVG code consists of

• elements of specific types
• having attributes with
• specific names
• and specific values.

(There is also something in the SVG code called content, which is represented by the title element in Listing 8 .)

The line elements

The first SVG element named line in Listing 8 corresponds to the Java object named floor in Listing 7 . The second SVG element named line in Listing 8 corresponds to the Java object named wall in Listing 7 .

Attributes of the line elements

The stroke and stroke-width attributes in Listing 8 should already be familiar to you as should the coordinate attributes named x1, y1, x2, and y2.

Unlike the SVG code for the rect element in Listing 6 , where there was only one pair of coordinate attributes named x and y, a line element as shown in Listing 8 requires two sets of coordinate attributes. Therefore, the two sets are distinguished from one another by appending a 1 and a 2 to the basic attribute names of x and y (x1, y1, x2, and y2) .

If you compare the coordinate attributes in Listing 8 with the coordinate values in the Java code in Listing 7 , and convert from inches to SVG units, you should find that they match.

#### Draw more rectangles

The Java code in Listing 9 causes four more rectangles to be drawn that represent the following objects in the drawing:

• The top of the table on which two rectangular masses are setting.
• The table leg that supports the rightmost end of the table. (The leftmost end is attached to the wall.)
• One of the rectangular masses, referred to as Mass C. (This mass sets on top of the table closest to the wall on the left end of the table.)
• The other rectangular mass referred to as Mass B. (This mass sets on top of the table closest to the rightmost end of the table away from the wall.)
##### Listing 9: Draw more rectangles.

//Draw the table top.
Element tableTop = SvgLib21.makeRect(svg,
ns,
"rectangle",
1.0,
3.0,
7.0,
1.0
);

//Draw the table leg.
Element tableLeg = SvgLib21.makeRect(svg,
ns,
"rectangle",
6.5,
0.5,
0.5,
2.5
);

//Draw Mass C
Element massC = SvgLib21.makeRect(svg,
ns,
"rectangle",
2.0,
4.0,
2.0,
2.0
);

//Draw Mass B
Element massB = SvgLib21.makeRect(svg,
ns,
"rectangle",
5.0,
4.0,
2.0,
2.0
);


The corresponding SVG code

The Java code in Listing 9 causes the four rect elements shown in Listing 10 to be created in the output SVG code.

##### Listing 10: SVG code to draw more rectangles.

<rect fill="none" stroke="black" stroke-width="1"
x="90" y="405" width="630" height="90">
<title>rectangle</title>
</rect>

<rect fill="none" stroke="black" stroke-width="1"
x="585" y="495" width="45" height="225">
<title>rectangle</title>
</rect>

<rect fill="none" stroke="black" stroke-width="1"
x="180" y="225" width="180" height="180">
<title>rectangle</title>
</rect>

<rect fill="none" stroke="black" stroke-width="1"
x="450" y="225" width="180" height="180">
<title>rectangle</title>
</rect>


You already know all about drawing rectangles, so no further explanation of the code in Listing 9 and Listing 10 should be needed.

#### Draw a polygon

The next task is to draw a triangular object that represents Mass C in the drawing. This is accomplished by the Java code in Listing 11 that causes a polygon, in the shape of a triangle, to be drawn.

##### Listing 11: Draw a polygon.

//Draw Mass A
Element massA = SvgLib21.makePolygon(
svg,
ns,
"polygon",
new double[]{
7.5, 1.0,//x-y coordinate pair
9.5, 1.0,//x-y coordinate pair
8.5, 2.5 //x-y coordinate pair
});


What can you modify?

You can modify the following items in the Java code shown in Listing 11 .

• The name of the object ( massA in Listing 11 ).
• The title ( "polygon" in Listing 11 ).
• The number of x-y coordinate pairs in the list of x-y coordinate pairs along with the values of the coordinates.

What is a polygon?

In SVG terminology, a polygon is a drawing that consists of a series of points in two-dimensional space connected by line segments. An additional line segment is automatically drawn from the last point to the first point. For example, triangles, pentagons, and hexagons are polygons.

What is a polyline?

In SVG terminology, a polyline is exactly like a polygon except that a line segment is not automatically drawn to connect the last point to the first point.

There are no polyline elements in this example drawing, but there is one in the program for a different drawing shown in Listing 27 . The Java code for drawing a polyline is the same as the Java code for drawing a polygon. The difference between the two occurs when the SVG processor draws the shapes and either does, or does not automatically connect the last point to the first point.

The most versatile shape

The polyline is the most versatile of all of the basic shapes. With enough patience, it can be used to draw any shape that can be drawn with curved lines. To draw a curved line using polyline elements, approximate it using a large number of short line segments. For example, polyline elements provide an ideal mechanism for drawing the kind of shapes that are commonly referred to as "curves" in math, physics, and engineering courses. By this, I mean a drawing that shows how a dependent variable behaves relative to an independent variable.

Drawing the polygon (or the polyline)

Getting back to the Java code in Listing 11 , you can insert any number (two or more) of x-y coordinate-pairs inside the curly brackets (but you must insert them in pairs) . Line segments will be drawn from the first coordinate location to the second, from the second to the third, and so on. (Of course there need to be two or more coordinate pairs in order for things to make sense.)

If you examine the coordinate values shown in Listing 11 , you will see that they define the vertices of a triangle whose base is parallel to the horizontal axis. Since this is a polygon, it will be drawn as a closed triangle with lines for all three sides. If it were a polyline, it would not be drawn as a closed triangle. Instead, only two lines would be drawn and the third side of the triangle would be open.

SVG code to draw a polygon

Listing 12 shows the SVG code produced by the Java code in Listing 11 .

##### Listing 12: SVG code to draw a polygon.

<polygon stroke="black" stroke-width="1" fill="none"
points="675 675 855 675 765 540 ">
<title>polygon</title>
</polygon>

The attribute named points

The polygon element in Listing 12 contains a new attribute name that you haven't seen before: points .

As you have probably figured out by now, the value of the attribute named points is a series of numeric values, separated by spaces, that represent the x-y coordinate pairs in Listing 11 , converted from inches to SVG units.

Hopefully by now you are beginning to see patterns that relate the Java code to the resulting SVG code.

#### Draw the rectangular pulley support

The drawing in Figure 2 shows a pulley connected to the rightmost end of the table. The drawing of the pulley consists of a rectangle as the support member and a circle as the pulley wheel. The Java code to draw the pulley support is shown in Listing 13 .

##### Listing 13: Draw the rectangular pulley support.
    //Draw pulley support
Element pullySupport = SvgLib21.makeRect(svg,
ns,
"rectangle",
7.883,
3.595,
0.392,
1.06
);

The Java code in Listing 13 simply draws another rectangle, so it shouldn't need further explanation.

#### Draw a circle

The Java code in Listing 14 draws a circle to serve as the pulley wheel in the drawing.

##### Listing 14: Draw a circle.

//Draw the pulley wheel.
Element pulleyWheel = SvgLib21.makeCircle(
svg,
ns,
"circle",
8.05, //x-coordinate of center of circle
4.56, //y-coordinate of center of circle
);



What are you allowed to change?

There are only four things that you are allowed to change in the code in Listing 14 :

1. The name of the circle object, which is pulleyWheel in Listing 14 .
2. The title ( "circle" in Listing 14 ) .
3. The value of the x-coordinate of the center of the circle.
4. The value of the y-coordinate of the center of the circle.
5. The radius of the circle.

You will need to examine the coordinate values for the center of the circle along with the radius of the circle and imagine how the position and size of the circle relates to the right end of the table top in Figure 2 . (Or hopefully, get a tactile version of the drawing and explore it by touch.)

SVG code to draw a circle

Listing 15 shows the SVG code produced by the Java code in Listing 14 .

##### Listing 15: SVG code to draw a circle.

<circle fill="none" stroke="black" stroke-width="1"
cx="725" cy="355" r="41">
<title>circle</title>
</circle>


By now, you should see the pattern and there should be no need to explain the relationship between the attributes of the circle element and the parameter values in the call to the makeCircle method in Listing 14 .

#### Draw more lines

The earlier section titled What does the image show describes how three cords are used to tie the masses to one another and to tie the leftmost mass to the wall. This is accomplished using the four calls to the Java makeLine method shown in Listing 16 .

##### Listing 16: Draw more lines.

//Draw cord from wall to Mass C
Element cordR = SvgLib21.makeLine(svg,
ns,
"line",
1.0,
5.0,
2,
5.0
);

//Draw cord from Mass C to Mass B
Element cordQ = SvgLib21.makeLine(svg,
ns,
"line",
4.0,
5.0,
5.0,
5.0
);

//Draw cord from Mass B to the top of the pulley.
Element cordP1 = SvgLib21.makeLine(svg,
ns,
"line",
7.0,
5.0,
8.05,
5.0
);

//Draw the cord from the right side of the pulley to
// Mass A
Element cordP2 = SvgLib21.makeLine(svg,
ns,
"line",
8.5,
4.5,
8.5,
2.5
);



There is nothing new in Listing 16 .

SVG code to draw more lines

The Java code in Listing 16 produces the SVG code shown in Listing 17 .

##### Listing 17: SVG code to draw more lines.

<line stroke="black" stroke-width="1"
x1="90" y1="315" x2="180" y2="315">
<title>line</title>
</line>

<line stroke="black" stroke-width="1"
x1="360" y1="315" x2="450" y2="315">
<title>line</title>
</line>

<line stroke="black" stroke-width="1"
x1="630" y1="315" x2="725" y2="315">
<title>line</title>
</line>

<line stroke="black" stroke-width="1"
x1="765" y1="360" x2="765" y2="540">
<title>line</title>
</line>


There is also nothing new in Listing 17 .

#### Change line thicknesses

With the exception of text to be discussed shortly, we have now created an element for every object that we need in our drawing.

As you may have noticed, the value of the stroke-width attribute for every element created so far has been "1". That is the default value. We may not be satisfied with that default value in all cases. We may prefer that some of the lines that describe the geometrical objects be thicker than lines that describe other geometrical objects.

My SVG graphics library provides a method named setStrokeWidth that we can use to adjust the stroke-width attribute values for an element before the final output SVG file is written. (As you will see if you examine Listing 27 , the library provides methods that let you adjust other attribute values as well.)

Set the stroke-width

The line thickness is controlled by the value of the stroke-width attribute in the SVG element that causes the geometrical object to be drawn.

Listing 18 contains a series of Java statements that set new values for the stroke-width attribute for each of a variety of objects. Since the statements are all essentially the same, I will discuss only the first one.

##### Listing 18: Set the stroke-width attribute value.

SvgLib21.setStrokeWidth(
border,//name of the object of interest
0.03   //new value for the stroke-width attribute
);

SvgLib21.setStrokeWidth(floor,0.1);
SvgLib21.setStrokeWidth(wall,0.1);
SvgLib21.setStrokeWidth(tableTop,0.03);
SvgLib21.setStrokeWidth(tableLeg,0.03);
SvgLib21.setStrokeWidth(massC,0.05);
SvgLib21.setStrokeWidth(massB,0.05);
SvgLib21.setStrokeWidth(massA,0.05);
SvgLib21.setStrokeWidth(pullySupport,0.05);
SvgLib21.setStrokeWidth(pulleyWheel,0.05);
SvgLib21.setStrokeWidth(cordR,0.03);
SvgLib21.setStrokeWidth(cordQ,0.03);
SvgLib21.setStrokeWidth(cordP1,0.03);
SvgLib21.setStrokeWidth(cordP2,0.03);



What are you allowed to change?

There are only two things that you can change in a call to the setStrokeWidth method as shown in Listing 18 :

• The name of the Java object of interest ( border for the first call in Listing 18 ).
• The new value for the stroke-width attribute in the SVG element that corresponds to the specified Java object (0.03 for the first call in Listing 18) .

Recall that border is the name of the Java object that is used to draw a rectangular border on the canvas (see Listing 5 ).

Recall also that the initial default value of the stroke-width attribute for the rect element was equal to "1" (see Listing 6 ).

To see the effect of the first call to the setStrokeWidth method in Listing 18 , go back and take a look at the final SVG output code in Listing 1 . Pay particular attention to the first rect element.

Modified stroke-width attribute value

I have reproduced that rect element in Listing 19 for convenient viewing.

##### Listing 19: Modified stroke-width attribute value.

<rect fill="none" stroke="black" stroke-width="3"
x="1" y="1" width="987" height="762">
<title>rectangle</title>
</rect>


As mentioned earlier, the default value for the stroke-width attribute of the rect element shown in Listing 6 was "1". However, after I added the first call to the setStrokeWidth method in Listing 18 and re-ran the program, the attribute value was changed to "3" corresponding approximately to a line thickness of 0.03 inch.

If you compare the parameter values to the remaining calls to the setStrokeWidth method in Listing 18 with the final values of the stroke-width attribute values in Listing 1 , they should all correspond accordingly.

#### Draw text

All that we have left to do in this program is to draw some text and write the output SVG file.

The Java code in Listing 20 can be used to draw one line of text.

##### Listing 20: Draw text.

//Draw text
Element textA = SvgLib21.makeText(
svg,
ns,
2.5,    //x-coordinate of beginning of text
3.3,    //y-coordinate of beginning of text
"arial",//font-family (optionally "")
32,     //font size in points
"Friction free table." //text to be drawn
);


Usage

Begin by setting the name of the Java object ( textA in Listing 20 ) to the name that you prefer.

Then set the x and y coordinate values for the location in the drawing where the text will be drawn. This specifies the location of the lower-left corner of the first character in the text string.

Then set the name of the font family (" arial " in Listing 20 ) or optionally leave that name blank. If no name is set ("") or an invalid name is set, a default font family will be used.

Then set the font size to the desired font size in points ( 32 in Listing 20 ).

Finally, set the last parameter to the string of text that is to be drawn.

Make sure that you include the quotation marks in both cases where they are used in Listing 20 .

Don't make any other changes to the code shown in Listing 20 .

Setting the font style and font weight

By default the text is normal (not bold, not italic, etc.) . My SVG graphics library provides methods by which you can change the weight and style of the text, such as making it bold and italic. (See usage instructions for those methods in Listing 27 .)

SVG code to draw text

Listing 21 shows the SVG code produced by the Java code in Listing 20 .

##### Listing 21: SVG code to draw text.

<text fill="black" stroke="black" x="225" y="468"
font-size="32" font-family="arial">
Friction free table.
</text>


You should be able to recognize all of the attributes and their values shown in Listing 21 .

The content of an element

There is something in Listing 21 that was not previously discussed in any detail -- content. The actual text, Friction free table , is not an attribute. Instead, it is what is called content in XML/SVG.

In addition, many of the earlier SVG code fragments had elements whose content consisted of a title element, which in turn had text content with words like line , polygon , etc.

This isn't particularly important to you as a user of my SVG graphics library. However, if you elect to create drawings by writing raw SVG code, this is something that you will need to study a little more deeply.

#### Write the output file

If you elect to create your drawings by writing raw SVG code in a text editor, all you need to do to write the output file is to save the text file from inside the editor.

However, if you elect to use my SVG graphics library and create your drawings by writing Java code, you need to include the code shown in Listing 22 to cause the final output SVG file to be written.

(Don't include the .svg extension in the file name that you specify. It is added automatically.)

##### Listing 22: Write the output file.

//WRITE OUTPUT FILE
SvgLib21.writePrettyFile("Svg21a",doc);



This must be the last statement that you write in your program. Otherwise, you will get an incomplete file.

Set the value inside the quotation marks to the desired path and filename for the file.

(Don't include the .svg extension in the file name that you specify. It is added automatically.)

Don't make any other changes to the code in Listing 22 .

The Java code in Listing 22 writes the output file with the name Svg21.svg in the folder from which the program is being executed (the current folder) . Because it is being written into the current folder, it isn't necessary to provide a path.

#### The remaining Java code

The remaining code that you will need to include in your Java program file is shown in Listing 23 .

Simply copy this code, without modifications, and paste it at the end of your file.

##### Listing 23: The remaining Java code.

//ONLY THE CODE ABOVE THIS LINE CAN BE MODIFIED
//##################################################//
//DO NOT MODIFY ANY OF THE FOLLOWING CODE.
}//end main
//----------------------------------------------------//

//Create a String variable containing the namespace
// URI to reduce the amount of typing that is required
// later. Note that the variable name is short and
// easy to type.
static String ns = "http://www.w3.org/2000/svg";

//For clarity, create strings containing the name of
// the element that is constrained by the DTD (the
// root element), the Public ID of the DTD, and the
// System ID of the DTD.
static String dtdConstrainedElement = "svg";
static String dtdPublicID = "-//W3C//DTD SVG 1.1//EN";
static String dtdSystemID =
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";

static DocType docType = new DocType(
dtdConstrainedElement,dtdPublicID,dtdSystemID);

}//end class


### The SVG graphics library

The Java code for my SVG graphics library is provided in Listing 26 . All you need to do is copy this code into a file named SvgLib21.java and place that file in the same folder with your program code. I will explain later what you need to do after that.

#### Note:

The graphics library in Listing 26 was updated on 08/11/11 to add new features. However, the text in this module has not been updated to illustrate the use of those new features. The downloadable documentation has been updated to include those features.

IVEO compatibility

Note that the library was revised on 08/07/11 to add a title element to each shape element and to the svg element. As a result, when the output SVG file is opened in the IVEO viewer and you click on a shape, information about that shape is spoken by IVEO. When you open the file in the IVEO viewer , the text content of the title element belonging to the svg element is spoken.

Note that you must be careful about the order in which you add the shapes to the drawing. For example, a rectangle that is added after a line is added can cover the line and prevent the information about the line from being spoken by IVEO even though the rectangle may be transparent. Therefore, for IVEO compatibility, you must not allow one shape object to cover another shape object.

Graphics library documentation

To view the documentation, YOU MUST EXTRACT the contents of the zip file into an empty folder. (Forgive me for shouting, but my students are constantly forgetting to extract material from a zip file before they try to use that material.) Then open the file named index.html in your browser. If you are unfamiliar with the format of the documentation, the explanation at http://www.apl.jhu.edu/~hall/java/beginner/api.html might be helpful.

### Another sample program

Another sample program that produces a different drawing is provided in Listing 27 . This program contains extensive usage instructions in the form of comments for all of the capabilities of my SVG graphics library. If you encounter any difficulties using the library, you should consult the instructions in that program.

## Writing, compiling, and running Java programs

### Writing Java code

Fortunately, writing Java code is straightforward. You can write Java code using any plain text editor. You simply need to cause the output file to have an extension of .java.

There are a number of high-level Integrated Development Environments (IDEs) available, such as Eclipse and NetBeans, but they tend to be overkill for the relatively simple Java programs described in this module.

There are also some low-level IDEs available, such as JCreator and DrJava, which are very useful for sighted students. However, I don't know anything about their level of accessibility. I normally use a free version of JCreator, mainly because it contains a color-coded editor, but that feature wouldn't be useful for a blind student.

So, just find an editor that you are happy with and use it to write your Java code.

### Preparing to compile and run Java code

Perhaps the most complicated thing is to get your computer set up for compiling and running Java code in the first place.

#### The java development kit (JDK)

I notice that Java SE 7 has been released very recently. However, my SVG graphics library was tested using Java SE 6 Update 26, and that is what I would recommend. Also there is a 64-bit version, but my library has not been tested with the 64-bit version. If your operating system will accommodate it, I recommend that you stick with the 32 bit version just in case the 64-bit version is not compatible with my library.

#### JDOM version 1.1.1

You will also need to download and install a class library named JDOM 1.1.1 at http://www.jdom.org/

When you do that download, you will receive a zip file that also contains some installation instructions. However, my experience is that those installation instructions are overkill, at least that is the case on a Windows machine.

All you need to do is to extract the file named jdom.jar from the zip file (look for it in the build directory in the zip file) , store it somewhere on your disk, and put it on the classpath at compile time and runtime. (I will explain the bit about the classpath a little later.)

In my case, I'm running Windows Vista Premium Home Edition and I elected to store the jdom.jar file in the following folder :

C:\Program Files (x86)\Java\jdom-1.1.1\build\jdom.jar

It doesn't really matter where you store it as long as you know how to specify that location in the classpath later.

### Compiling and running Java code

There are a variety of ways to compile and run Java code. The way that I will describe here is the most basic and, in my opinion, the most reliable. These instructions apply to a Windows operating system. If you are using a different operating system, you will need to translate the instructions to your operating system.

Begin by writing your Java program into a text file with an extension of .java. Save it in a folder somewhere on your disk. Make sure that you adhere to the earlier instructions regarding the name of the class and the name of the file, and remember that everything is case sensitive.

Create a file named SvgLib21.java that contains an exact replica of the Java code in Listing 26 . Store that file in the same folder as your Java program.

Create a batch file (or whatever the equivalent is for your operating system) containing the text shown in Listing 24 .

Then execute the batch file.

If everything is successful, a Firefox window should open showing your drawing ready to be printed.

#### Listing 24: Windows batch file.


cls

del *.class
del Svg21a.svg
javac -cp ".;C:\Program Files (x86)\Java\jdom-1.1.1\build\jdom.jar" SvgLib21.java
javac -cp ".;C:\Program Files (x86)\Java\jdom-1.1.1\build\jdom.jar" Svg21a.java
java -cp ".;C:\Program Files (x86)\Java\jdom-1.1.1\build\jdom.jar"  Svg21a
start Firefox.exe Svg21a.svg
pause


Note that the text inside the quotation marks is the same as the location where I stored the file named jdom.jar . In fact, it is identical except that ".;" appears before that location in Listing 24 . You need to cause your batch file to identify the location of the file named jdom.jar on your system just like I did in Listing 24 .

Do not modify the text that reads "SvgLib21.java" in Listing 24 .

Replace the text that reads "Svg21a" in all three locations in Listing 24 with the name of your program. Note, however, that the first time it appears, it is specifying the name of the output SVG file. In case you elected to give your output SVG file a different name than the name of your program, you need to insert that name in place of Svg21a.svg .

Starting the browser automatically

Listing 24 also assumes that you have Firefox 5 or later installed on your system and starts it running automatically . (It will probably also work with earlier versions of Firefox. However, I have been unable to cause either Google Chrome or IE 9 to start automatically using this approach.)

In any event, the last line of text before the pause can be deleted from Listing 24 with no harmful effects. It simply won't start the browser automatically if you delete that text. In that case, you will have to manually open the output SVG file in the browser (or in some other SVG processor program) in order to print it. (Opening the SVG file manually seems to work in Firefox 5, IE 9, and Google Chrome 12.)

Don't delete the pause command

The pause command causes the command-line window to stay on the screen. You will need to examine the contents of the window if there are errors when you attempt to compile and run your program, so don't delete the pause command.

Translate to other operating systems

Remember, the format of the batch file in Listing 24 is a Windows format. If you are using a different operating system, you will need to translate the information in Listing 24 into the correct format for your operating system.

## Resources

I will publish a module containing consolidated links to resources on my Connexions web page and will update and add to the list as additional modules in this collection are published.

## Complete program listings

Complete listings of the three programs discussed in this module are provided in Listing 25 , Listing 26 , and Listing 27 .

### Listing 25: The program named Svg21a.java.


/*File Svg21a.java,

Revised 08/07/11 to support the addition of a title
parameter to each element for IVEO compatibility. If the
output SVG file is opened in IVEO, the title for the svg
element is spoken when the user opens the file, and the
titles for the individual elements are spoken when the
user touches a corresponding shape on the touchpad or
clicks on that shape on the screen. If the SVG file won't
be used with IVEO, just leave the title strings unchanged.

named SvgLib21.java

This is a demonstration program.

This program uses JDOM 1.1.1 and an SVG graphics library
class of my own design named SvgLib21 to draw an
abbreviated version of the mass-pulley system shown in
http://cnx.org/content/m38211/latest/#Figure_4

Only one line of text is drawn by this program. Otherwise,
the drawing produced by this program is the same as
the drawing in the file named Phy1150a1.svg used in
that module titled Force and Motion -- Units of Force. The
original drawing was produced by a sighten person using
Inkscape. This drawing was produced by a sighted person
using Baldwin's svg drawing library.

Tested using J2SE 6, JDOM 1.1.1, and Firefox 5
running under Windows Vist Home Premium Edition.
*********************************************************/
import java.io.*;
import org.jdom.*;

public class Svg21a{
public static void main(String[] args){

//DO NOT MODIFY ANY OF THE CODE ABOVE THIS LINE.
//##################################################//
//ONLY THE CODE BELOW THIS LINE CAN BE MODIFIED

//CREATE A DRAWING CANVAS
//This must be the first statement that you write in
// the program and it must appear only once.
//The following statement creates a canvas that is
// 8.5x11 inches in size in a landscape layout.
Element svg = SvgLib21.makeSvg(ns,
"Document Title",
11,//width
8.5  //height
);

//DO NOT MODIFY THE FOLLOWING STATEMENT
//This statement must immediately follow the call to
// the makeSvg method above and this statement MUST
// NOT BE MODIFIED.
Document doc = new Document(svg,docType);

//Draw a rectangular border on the canvas.
Element border = SvgLib21.makeRect(svg,
ns,
"rectangle",
0.015,
0.015,
10.97,
8.47
);

//Draw the floor.
Element floor = SvgLib21.makeLine(svg,
ns,
"line",
0.5,
0.5,
10.5,
0.5
);

//Draw the wall.
Element wall = SvgLib21.makeLine(svg,
ns,
"line",
1.0,
0.5,
1.0,
7.5
);

//Draw the table top.
Element tableTop = SvgLib21.makeRect(svg,
ns,
"rectangle",
1.0,
3.0,
7.0,
1.0
);

//Draw the table leg.
Element tableLeg = SvgLib21.makeRect(svg,
ns,
"rectangle",
6.5,
0.5,
0.5,
2.5
);

//Draw Mass C
Element massC = SvgLib21.makeRect(svg,
ns,
"rectangle",
2.0,
4.0,
2.0,
2.0
);

//Draw Mass B
Element massB = SvgLib21.makeRect(svg,
ns,
"rectangle",
5.0,
4.0,
2.0,
2.0
);

//Draw Mass A
Element massA = SvgLib21.makePolygon(svg,
ns,
"polygon",
new double[]{
7.5,1.0,
9.5,1.0,
8.5,2.5
});

//Draw pully support
Element pullySupport = SvgLib21.makeRect(svg,
ns,
"rectangle",
7.883,
3.595,
0.392,
1.06
);

//Draw the pulley wheel.
Element pulleyWheel = SvgLib21.makeCircle(svg,
ns,
"circle",
8.05,
4.56,
0.45
);

//Draw cord from wall to Mass C
Element cordR = SvgLib21.makeLine(svg,
ns,
"line",
1.0,
5.0,
2,
5.0
);

//Draw cord from Mass C to Mass B
Element cordQ = SvgLib21.makeLine(svg,
ns,
"line",
4.0,
5.0,
5.0,
5.0
);

//Draw cord from Mass B to the top of the pulley.
Element cordP1 = SvgLib21.makeLine(svg,
ns,
"line",
7.0,
5.0,
8.05,
5.0
);

//Draw the cord from the right side of the pulley to
// Mass A
Element cordP2 = SvgLib21.makeLine(svg,
ns,
"line",
8.5,
4.5,
8.5,
2.5
);

//Set the line thicknesses for various objects.
SvgLib21.setStrokeWidth(border,0.03);
SvgLib21.setStrokeWidth(floor,0.1);
SvgLib21.setStrokeWidth(wall,0.1);
SvgLib21.setStrokeWidth(tableTop,0.03);
SvgLib21.setStrokeWidth(tableLeg,0.03);
SvgLib21.setStrokeWidth(massC,0.05);
SvgLib21.setStrokeWidth(massB,0.05);
SvgLib21.setStrokeWidth(massA,0.05);
SvgLib21.setStrokeWidth(pullySupport,0.05);
SvgLib21.setStrokeWidth(pulleyWheel,0.05);
SvgLib21.setStrokeWidth(cordR,0.03);
SvgLib21.setStrokeWidth(cordQ,0.03);
SvgLib21.setStrokeWidth(cordP1,0.03);
SvgLib21.setStrokeWidth(cordP2,0.03);

//Draw text
Element textA = SvgLib21.makeText(
svg,
ns,
2.5,
3.3,
"arial",
32,
"Friction free table."
);

//WRITE OUTPUT FILE
//Don't include extension in output file name.
SvgLib21.writePrettyFile("Svg21a",doc);

//ONLY THE CODE ABOVE THIS LINE CAN BE MODIFIED
//##################################################//
//DO NOT MODIFY ANY OF THE FOLLOWING CODE.
}//end main
//----------------------------------------------------//

//Create a String variable containing the namespace
// URI to reduce the amount of typing that is required
// later. Note that the variable name is short and
// easy to type.
static String ns = "http://www.w3.org/2000/svg";

//For clarity, create strings containing the name of
// the element that is constrained by the DTD (the
// root element), the Public ID of the DTD, and the
// System ID of the DTD.
static String dtdConstrainedElement = "svg";
static String dtdPublicID = "-//W3C//DTD SVG 1.1//EN";
static String dtdSystemID =
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";

static DocType docType = new DocType(
dtdConstrainedElement,dtdPublicID,dtdSystemID);

}//end class Svg21a


Note that the strange comments in Listing 26 were placed there so that the program named javadoc could be used to produce standard Java documentation for the graphic library.

### Listing 26: The program named SvgLib21.java.


import java.io.*;
import org.jdom.*;
import org.jdom.output.XMLOutputter;
import org.jdom.output.Format;

/**
File SvgLib21.java
<p>
<p>
Revised 08/11/11 to add a method named setDescription
that can be called to add a <desc> element to any other
element. The description can be spoken in IVEO by first
selecting the element an pressing Ctrl+d.
<p>
Revised 08/07/11 to add a parameter for the title to
allow the user to pass in a string for the title element.
<p>
Revised 08/06/11 to add a title element to each shape
element. As a result, when the SVG file is
opened in IVEO and you click on the shape, the name of
the shape is spoken by IVEO. Note, however, that you
shapes to the drawing. For example, a rectangle that
and prevent the information about the line from being
spoken even though the rectangle may be transparent.
Therefore, for IVEO compatibility, you must not allow
one shape object to cover another shape object.
<p>
DESCRIPTION
<p>
This is a graphics library that is designed to eliminate
much of the pain involved in writing JDOM code to
create SVG output. The library contains individual
static methods that are used to construct and return
all of the SVG basic shape elements, text elements,
description elements and comment elements.
<p>
In addition there are methods to set various attributes
on shape elements and text elements.

This library provides methods to instantiate, return,
and manipulate the following types of SVG elements:
<ul>
<li>line</li>
<li>rect</li>
<li>circle</li>
<li>ellipse</li>
<li>polyline</li>
<li>polygon</li>
<li>desc</li>
<li>comment</li>
<li>text</li>
</ul>
<p>
Methods that return elements set the stroke attribute
value to black and set the stroke-width attribute
value to 1.
<p>
All of the methods that accept coordinate values or
dimensions as input require those values to be in
inches or fractions thereof. They are then converted
to svg units using a scale factor of 90 svg units
per inch.
<p>
All incoming vertical coordinate values are modified
to cause the origin to be at the lower-left corner.
Positive x is to the right and positive y is up the
page. Therefore, the user can think in terms of a
typical graphing assignment with the origin at the
lower-left corner.
<p>
One svg unit equals approximately 0.011 inch. An svg
unit is not necessarily the same size as a pixel on a
monitor or a printer. However, dimensions specified in
inches should be very close when you print the image.
<p>
In addition to the methods mentioned above, this library
provides two different methods for writing the final
SVG/XML out to a file. One is named writePrettyFile and
the other is named writeCompactFile.
<p>
Tested using J2SE 6.0, JDOM 1.1.1, Firefox 5, running
under Windows Vista Home Premius Edition.
<p>
author: Richard G. Baldwin
*/
public class SvgLib21{

/*The following instance variable is used to cause the
origin to be at the bottom left corner of the
drawing.
*/
private static double svgHeight = 11.0;

//----------------------------------------------------//

/**This method constructs and returns a circle node for
*a given parent in a given namespace.  By default,the
*stroke is black, the stroke-width is 1, and the fill
*is none. Other methods can be called to change these
*default values later.
*
* @param parent the SVG parent element
* @param namespace the SVG namespace
* @param elementTitle the title for IVEO compatibility
* @param cx the x-coordinate of the center in inches
* @param cy the y-coordinate of the center in inches
* @param r the radius of the circle in inches
*
* @return A reference to an object that represents an
*SVG circle element
*/
public static Element makeCircle(
Element parent,
String namespace,
String elementTitle,
double cx,//Center coordinate in inches
double cy,//Center coordinate in inches
){
Element circle = new Element("circle",namespace);

//Set default attribute vales
circle.setAttribute("fill","none");
circle.setAttribute("stroke","black");
circle.setAttribute("stroke-width","1");

//Set user specified attribute values.
int cxInPix = (int)(Math.round(cx*90));
int cyInPix =
(int)(Math.round((svgHeight-cy)*90));
int rInPix = (int)(Math.round(r*90));

circle.setAttribute("cx",""+cxInPix);
circle.setAttribute("cy",""+cyInPix);
circle.setAttribute("r",""+rInPix);

//Add a title element for IVEO compatibility
Element title = new Element("title",namespace);

return circle;
}//end makeCircle
//----------------------------------------------------//

/**This method constructs and returns a comment node
*for a given given parent.
*
* @param parent the SVG parent element
* @param text the text content for this comment element
*
*@return A reference to an object that represents an
*SVG comment element.
*/
public static Comment makeComment(
Element parent,//The parent of this element.
String text//Text content for this element.
){
Comment comment = new Comment(text);

return comment;
}//end makeComment
//----------------------------------------------------//

/**
*DEPRECATED This method has been deprecated Use the
*
*This method constructs and returns a description node
*for a given namespace and a given parent.
*
* @param parent the SVG parent element
* @param nameSpace the SVG namespace
* @param text the text content for this desc element
*
*@return A reference to an object that represents an
*SVG desc element.
*/
public static Element makeDescription(
Element parent,//The parent of this element.
String nameSpace,//The namespace.
String text//Text content for this element.
){
Element desc = new Element("desc",nameSpace);
desc.setText(text);

return desc;
}//end makeDescription
//----------------------------------------------------//

/**This method constructs and returns an ellipse node
*for a given parent in a given namespace. By default,
*the stroke is black, the stroke-width is 1, and the
*fill is none.
*
* @param parent the SVG parent element
* @param namespace the SVG namespace
* @param elementTitle the title for IVEO compatibility
* @param cx the x-coordinate of the center in inches
* @param cy the y-coordinate of the center in inches
* @param rx the horizontal radius of the ellipse
* in inches
* @param ry the vertical radius of the ellipse
* in inches
*
* @return A reference to an object that represents an
*SVG ellipse element
*/
public static Element makeEllipse(
Element parent,
String namespace,
String elementTitle,
double cx,//Center coordinate in inches
double cy,//Center coordinate in inches
double ry //Vertical radius in inches
){
Element ellipse = new Element("ellipse",namespace);

//Set default attribute vales
ellipse.setAttribute("fill","none");
ellipse.setAttribute("stroke","black");
ellipse.setAttribute("stroke-width","1");

//Set user specified attribute values.
int cxInPix = (int)(Math.round(cx*90));
int cyInPix =
(int)(Math.round((svgHeight-cy)*90));
int rxInPix = (int)(Math.round(rx*90));
int ryInPix = (int)(Math.round(ry*90));

ellipse.setAttribute("cx",""+cxInPix);
ellipse.setAttribute("cy",""+cyInPix);
ellipse.setAttribute("rx",""+rxInPix);
ellipse.setAttribute("ry",""+ryInPix);

//Add a title element for IVEO compatibility
Element title = new Element("title",namespace);

return ellipse;
}//end makeEllipse
//----------------------------------------------------//

/**This method constructs and returns a line node for a
*given parent in a given namespace.  By default, the
*stroke is black and the stroke-width is 1.
*
* @param parent the SVG parent element
* @param namespace the SVG namespace
* @param elementTitle the title for IVEO compatibility
* @param x1 start x-coordinate in inches
* @param y1 start y-coordinate in inches
* @param x2 end x-coordinate in inches
* @param y2 end y-coordinate in inches
*
* @return A reference to an object that represents an
*SVG line element
*/
public static Element makeLine(
Element parent,
String namespace,
String elementTitle,
double x1,//Start coordinate in inches
double y1,//Start coordinate in inches
double x2,//End coordinate in inches
double y2 //End coordinate in inches
){
Element line = new Element("line",namespace);

//Set default attribute vales
line.setAttribute("stroke","black");
line.setAttribute("stroke-width","1");

//Set user specified attribute values.
int x1InPix = (int)(Math.round(x1*90));
int y1InPix =
(int)(Math.round((svgHeight-y1)*90));
int x2InPix = (int)(Math.round(x2*90));
int y2InPix =
(int)(Math.round((svgHeight-y2)*90));

line.setAttribute("x1",""+x1InPix);
line.setAttribute("y1",""+y1InPix);
line.setAttribute("x2",""+x2InPix);
line.setAttribute("y2",""+y2InPix);

//Add a title element for IVEO compatibility
Element title = new Element("title",namespace);

return line;
}//end makeLine
//----------------------------------------------------//

/**This method constructs and returns a polygon node for
*a given parent in a given namespace.
*<p>
*The array of type double[], which contains the
*coordinates for each point in the polygon, must
*contain an even number of values for the polygon
*to be drawn correctly. Otherwise, it simply won't be
*drawn.
*<p>
*The values are extracted from the array, converted
*to svg units as type int, and treated as coordinate
*values x1,y1, x2,y2, x3,y3 ... etc.
*<p>
*The stroke is set to black one pixel wide with no
*fill.
*<p>
*The main difference between a polygon and a polyline
*is that a polygon is automatically closed by
*connecting the last point to the first point.
*
* @param parent the SVG parent element
* @param namespace the SVG namespace
* @param elementTitle the title for IVEO compatibility
* @param points an array of x-y coordinate pairs in
* inches that define the locations of the vertices of
* the polygon.
*
* @return A reference to an object that represents an
*SVG polygon element
*/
public static Element makePolygon(Element parent,
String namespace,
String elementTitle,
double[] points){
Element polygon = new Element("polygon",namespace);

//Set default attributes.
polygon.setAttribute("stroke","black");
polygon.setAttribute("stroke-width","1");
polygon.setAttribute("fill","none");

//Set user specified attributes.
String dataPoints = "";
for(int cnt=0;cnt<points.length;cnt++){
//Correct all of the y coordinates to place the
// origin at the bottom left.
if(cnt%2==0){
//even values
dataPoints += "" +
(int)(Math.round(points[cnt]*90)) + " ";
}else{
//odd values
dataPoints += "" +
(int)(Math.round((svgHeight-points[cnt])
*90)) + " ";
}//end else
}//end for loop

polygon.setAttribute("points",dataPoints);

//Add a title element for IVEO compatibility
Element title = new Element("title",namespace);

return polygon;
}//end makePolygon
//----------------------------------------------------//

/**This method constructs and returns a polyline node
*for a given parent in a given namespace.
*<p>
*The array of type double[], which contains the
*coordinates for each point in the polyline, must
*contain an even number of values for the polyline
*to be drawn correctly. Otherwise, it simply won't be
*drawn.
*<p>
*The values are extracted from the array, converted
*to svg units as type int, and treated as coordinate
*values x1,y1, x2,y2, x3,y3 ... etc.
*<p>
*The stroke is set to black one pixel wide with no
*fill.
*<p>
*The main difference between a polyline and a polygon
*is that a polygon is automatically closed by
*connecting the last point to the first point.
*
* @param parent the SVG parent element
* @param namespace the SVG namespace
* @param elementTitle the title for IVEO compatibility
* @param points an array of x-y coordinate pairs in
* inches that define the locations of the end points
* and the vertices of the polyline.
*
* @return A reference to an object that represents an
*SVG polyline element
*/
public static Element makePolyline(Element parent,
String namespace,
String elementTitle,
double[] points){
Element polyline = new Element("polyline",namespace);

//Set default attributes
polyline.setAttribute("stroke","black");
polyline.setAttribute("stroke-width","1");
polyline.setAttribute("fill","none");

//Set user specified attributes.
String dataPoints = "";
for(int cnt=0;cnt<points.length;cnt++){
//Correct all of the y coordinates to place the
// origin at the bottom left.
if(cnt%2==0){
//even values
dataPoints += "" +
(int)(Math.round(points[cnt]*90)) + " ";
}else{
//odd values
dataPoints += "" +
(int)(Math.round((svgHeight-points[cnt])
*90)) + " ";
}//end else
}//end for loop

polyline.setAttribute("points",dataPoints);

//Add a title element for IVEO compatibility
Element title = new Element("title",namespace);

return polyline;
}//end makePolyline
//----------------------------------------------------//

/**This method constructs and returns a rect node for a
*given parent in a given namespace.  By default,the
*stroke is black, the stroke-width is 1, and the fill
*is none.
*
* @param parent the SVG parent element
* @param namespace the SVG namespace
* @param elementTitle the title for IVEO compatibility
* @param x x-coordinate of lower left corner in inches
* @param y y-coordinate of lower left corner in inches
* @param width width in inches
* @param height height in inches
*
* @return A reference to an object that represents an
*SVG rect element
*/
public static Element makeRect(
Element parent,
String namespace,
String elementTitle,
double x,//Lower-left corner in inches.
double y,//Lower-left corner in inches.
double width,//in inches
double height//in inches
){
Element rect = new Element("rect",namespace);

//Set default attribute values.
rect.setAttribute("fill","none");
rect.setAttribute("stroke","black");
rect.setAttribute("stroke-width","1");

//Set user specified attribute values.
int xInPix = (int)(Math.round(x*90));
int yInPix =
(int)(Math.round((svgHeight-y-height)*90));
int widthInPix = (int)(Math.round(width*90));
int heightInPix = (int)(Math.round(height*90));

rect.setAttribute("x",""+xInPix);
rect.setAttribute("y",""+yInPix);
rect.setAttribute("width",""+widthInPix);
rect.setAttribute("height",""+heightInPix);

//Add a title element for IVEO compatibility
Element title = new Element("title",namespace);

return rect;
}//end makeRect
//----------------------------------------------------//

/**This method constructs and returns a reference to an
*SVG root element node named svg.
*
*The svg element represents the canvas on which
*various shapes can be drawn. The width and height
*attribute values of the svg element establish the
*physical size of the canvas on the screen and on
*the printer.
*
*The preserveAspectRatio defaults to none.
*
* @param ns the SVG namespace URI
* @param documentTitle the title for IVEO compatibility
* @param dWidth the width of the canvas in inches
* @param dHeight the height of the canvas in inches
*
* @return A reference to an SVG element object
*/
public static Element makeSvg(
String ns,//namespace URI
String documentTitle,
double dWidth,
double dHeight
){
Element svg = new Element("svg",ns);

//Save the height of the canvas. This is used later
// to make corrections to y-coordinate values to put
// the origin at the lower-left corner of the canvas.
svgHeight = dHeight;

int width = (int)(Math.round(dWidth*90));
int height = (int)(Math.round(dHeight*90));

//Set default attribute values.
svg.setAttribute("version","1.1");
svg.setAttribute("width",""+width);
svg.setAttribute("height",""+height);

//Add a title element for IVEO compatibility
Element title = new Element("title",ns);

return svg;
}//end makeSvg
//----------------------------------------------------//

/**This method constructs and returns a text node for a
*given parent in a given namespace.  By default,the
*stroke is black, and the fill is none.
*
* @param parent the SVG parent element
* @param namespace the SVG namespace
* @param x x-coordinate of lower left corner of first
* character in inches
* @param y y-coordinate of lower left corner of first
* character in inches
* @param fontFamily font family such as arial
* @param fontSize font size in points such as 32
* @param textIn the text to be displayed
*
* @return A reference to an object that represents an
*SVG text element
*/
public static Element makeText(
Element parent,
String namespace,
double x,//Beginning coordinate in inches
double y,//Beginning coordinate in inches
String fontFamily,  //Font face
int fontSize, //font size in points
String textIn //text to be displayed
){
Element text = new Element("text",namespace);

//Set default attribute values
text.setAttribute("fill","black");
text.setAttribute("stroke","black");

//Set user specified attribute values.
int xInPix = (int)(Math.round(x*90));
int yInPix = (int)(Math.round((svgHeight-y)*90));

text.setAttribute("x",""+xInPix);
text.setAttribute("y",""+yInPix);
text.setAttribute("font-size","" +fontSize);
text.setAttribute("font-family",fontFamily);

return text;
}//end makeText
//----------------------------------------------------//

/**This method can be used to set the fill color for
*closed shapes such as rectangles, circles, ellipses,
*and polygons. It can also be applied to polylines,
*but the results may not be what you expect.
*<p>
*The fill color can be set to "none" or to any of the
*color names at
*<p>
<a href="http://www.w3.org/TR/SVG/types.html#ColorKeywords">
http://www.w3.org/TR/SVG/types.html#ColorKeywords</a>
*<p>
*There may be other possibilities as well.
*
*@param element the element for which the fill will be
*set
*@param fillColor the new color for the fill
*/
public static void setFill(Element element,
String fillColor){
element.setAttribute("fill",fillColor);
}//end setFill
//----------------------------------------------------//

/**This method can be used to set the fill opacity for
*all closed shapes such as rectangles, circles,
*ellipses, and polygons.
*<p>
*The fill opacity can be set to any value between
*0,0 and 1.0 inclusive, where 0.0 is totally
*transparent and 1.0 is totally opaque.
*
*@param element the element for which the opacity
*will be set
*@param opacity the numeric opacity value
*/
public static void setFillOpacity(Element element,
double opacity){
element.setAttribute("fill-opacity","" + opacity);
}//end setFillOpacity
//----------------------------------------------------//

/**This method can be used to set the font style
*for text.
*<p>
*The font-style can be set to
*<p>
*normal | italic | oblique
*
*@param element the text element for which the font
*style will be set
*@param fontStyle the new font style
*/
public static void setFontStyle(Element element,
String fontStyle){
element.setAttribute("font-style","" + fontStyle);
}//end setFontStyle
//----------------------------------------------------//

/**This method can be used to set the font weight
*for text.
*<p>
*The font-weight can be set to
*<p>
*normal | bold | bolder | lighter | 100 | 200 | 300|
*400 | 500 | 600 | 700 | 800 | 900 |
*
*@param element the text element for which the font
*weight will be set
*@param fontWeight the new font weight
*/
public static void setFontWeight(Element element,
String fontWeight){
element.setAttribute("font-weight","" + fontWeight);
}//end setFontWeight
//----------------------------------------------------//

/**This method can be used to set the stroke color for
*all shapes.
*<p>
*The stroke color can be set to "none" or any of the
*color names at
*<p>
<a href="http://www.w3.org/TR/SVG/types.html#ColorKeywords">
http://www.w3.org/TR/SVG/types.html#ColorKeywords</a>
*<p>
*There may be other possibilities as well.
*
*@param element the element for which the stroke color
*will be set
*@param strokeColor the new stroke color
*/
public static void setStroke(Element element,
String strokeColor){
element.setAttribute("stroke",strokeColor);
}//end setStroke
//----------------------------------------------------//

/**This method can be used to set the stroke opacity
*for all shapes.
*<p>
*The stroke opacity can be set to any value between
*0,0 and 1.0 inclusive, where 0.0 is totally
*transparent and 1.0 is totally opaque.
*
*@param element the element for which the stroke color
*will be set
*@param opacity the numeric opacity value
*/
public static void setStrokeOpacity(Element element,
double opacity){
element.setAttribute("stroke-opacity","" + opacity);
}//end setStrokeOpacity
//----------------------------------------------------//

/**This method can be used to set the stroke width
*for rectangles, circles, ellipses, lines, polylines,
*and polygons.
*
*@param element the element for which the stroke color
*will be set
*@param widthInInches the new stroke width in inches
*or parts thereof
*/
public static void setStrokeWidth(Element element,
double widthInInches){
//Scale and round the double width value to an
// int value in svg units where there are 90 svg
// units per inch.
int widthInPix =
(int)(Math.round(widthInInches*90));
element.setAttribute("stroke-width","" + widthInPix);
}//end setStrokeWidth
//----------------------------------------------------//

/**This method can be used to add a description <desc>
*element to any other element
*
* @param parent the element to which the description
* @param namespace the SVG namespace
*@param description the text for the new description.
*/
public static void setDescription(Element parent,
String namespace,
String description){
Element desc = new Element("desc",namespace);
}//end setStrokeWidth
//----------------------------------------------------//

/**This method writes the SVG code into an output file
*in whitespace-normalized format, which is more
*efficient than the prettyPrint format.
*@param fname path and name of output SVG file
*including the .svg filename extension
*@param doc a reference to an object of type Document
*which was instantiated as
*<p>
*new Document(svg,docType)
*<p>
*where svg is the root element of the SVG document
*<p>
*and docType was instantiated as
*<p>
*DocType docType = new DocType(
* dtdConstrainedElement,dtdPublicID,dtdSystemID);
*/
public static void writeCompactFile(
String fname, Document doc){
try{
FileOutputStream out = new FileOutputStream(fname);

XMLOutputter xmlOut =
new XMLOutputter(Format.getCompactFormat());
xmlOut.output(doc,out);

out.flush();
out.close();
}catch (IOException e){
System.err.println(e);
}//end catch
}//end writePrettyFile
//----------------------------------------------------//

/**This method writes the SVG code into an output file
*in pretty-print format. The pretty-print format
*is less efficient than the compact format, but it
*is very useful during test and debugging because
*you can view source in your browser and the XML
*code will be reasonably well formatted.
*<p>
*Note that the extension is automatically appended to
*the output file name, so it should not be included
*in the file name input parameter.
*
*@param fname path and name of output SVG file
*excluding the .svg filename extension
*@param doc a reference to an object of type Document
*which was instantiated as
*<p>
*new Document(svg,docType)
*<p>
*where svg is the root element of the SVG document
*<p>
*and docType was instantiated as
*<p>
*DocType docType = new DocType(
* dtdConstrainedElement,dtdPublicID,dtdSystemID);
*/
public static void writePrettyFile(
String fname, Document doc){
try{
FileOutputStream out =
new FileOutputStream(fname + ".svg");

XMLOutputter xmlOut =
new XMLOutputter(Format.getPrettyFormat());
xmlOut.output(doc,out);

out.flush();
out.close();
}catch (IOException e){
System.err.println(e);
}//end catch
}//end writePrettyFile
//----------------------------------------------------//

}//end class SvgLib21



-----

### Listing 27: The program named Svg21.java.


/*File Svg21.java,

Revised 08/07/11 to support the addition of a title
parameter to each element for IVEO compatibility. If the
output SVG file is opened in IVEO, the title for the svg
element is spoken when the user opens the file, and the
titles for the individual elements are spoken when the
user touches a corresponding shape on the touchpad or
clicks on that shape on the screen. If the SVG file won't
be used with IVEO, just leave the title strings unchanged.

named SvgLib21.java

This is a demonstration program.

This program uses JDOM 1.1.1 and an SVG graphics library
class of my own design named SvgLib21 to create an XML
file named Svg21.svg that draws at least one of each of
the following six basic SVG shapes when rendered in an
SVG graphics engine such as Firefox 5.

* rectangle
* circle
* ellipse
* line
* polyline
* polygon

In addition, the program illustrates the creation of the
following two types of elements in the output SVG file.

* description
* comment

The main purpose is to demonstrate how to create an SVG
file using the JDOM SVG graphics library that can be
displayed using Firefox 5 or IE 9. The file can also
be opened in other programs such as InkScape and IVEO.

All coordinate values are in inches and fractions of
inches.

One svg unit equals approximately 0.011 inch. An svg
unit is not necessarily the same size as a pixel on your
monitor or your printer. However, dimensions specified
in inches should be very close when you print the image.

By default, all lines that define the geometric shapes
are black and are one pixel wide. This can be changed
by calling appropriate methods to change attribute values.

By default, the fill attribute for all geometric shapes
is "none". This can be changed by calling appropriate
methods to change attribute values.

This program creates a canvas that is 8.5x11 inch in
a portrait orientation.

The origin is at the lower-left corner. Positive x is
to the right and positive y is up the page.

Tested using J2SE 6, JDOM 1.1.1, and Firefox 5
running under Windows Vist Home Premium Edition.
*********************************************************/
import java.io.*;
import org.jdom.*;

public class Svg21{
public static void main(String[] args){

//DO NOT MODIFY ANY OF THE CODE ABOVE THIS LINE.
//##################################################//
//ONLY THE CODE BELOW THIS LINE CAN BE MODIFIED

//CREATE A DRAWING CANVAS
//This must be the first statement that you write in
// the program and it must appear only once.
//The following statement creates a canvas that is
// 8.5x11 inches in size in a portrait layout. The
// size of the canvas can be changed by changing the
// width and height parameters in the method call.
Element svg = SvgLib21.makeSvg(ns,
"Document Title",
8.5,//width
11  //height
);

//DO NOT MODIFY THE FOLLOWING STATEMENT
//This statement must immediately follow the call to
// the makeSvg method above and this statement MUST
// NOT BE MODIFIED.
Document doc = new Document(svg,docType);

//DESCRIPTION ELEMENT
//The following code can be used to add a <desc>
// element to the svg file if you want one. Replace
// the text in quotation marks with your description.
// Don't make any other changes to the code.
SvgLib21.makeDescription(svg,
ns,
"The basic SVG shapes."
);

//XML/SVG COMMENT
//The following code can be used to insert a comment
// into the svg file if you want one. Replace the
// text in quotatin marks with your comment text.
// Don't make any other changes to the code. You can
// insert as many statements of this type as you
// need, one for each comment. A comment will be
// inserted into the svg file each time you insert a
// makeComment statement.
SvgLib21.makeComment(svg,
"Show outline of canvas."
);

//Create some geometrical shapes.

//LINE SEGMENT
//The following code can be used to draw a line
// segment.
//Set the values of the first two parameters
// following ns to specify the x and y coordinates of
// one end of the line segment.
//Set the final two parameters to specify the other
// end of the line segment.
//By default the line segment (the stroke) is one
// pixel wide and black.
//You can insert as many statements of this type as
// you need, one for each line segment.
//Give each line segment a unique name such as lineA,
// lineB, lineC, etc.
//Don't make any other changes to the code, and in
// particular, don't delete the commas.
//The line segment drawn by the following statement
// extends from the lower-left to the upper-right
// corner of the canvas.
Element lineA = SvgLib21.makeLine(svg,
ns,
"line",
0,
0,
8.5,
11.0
);

//RECTANGLE
//The following code can be used to draw a
// rectangle whose sides are parallel to the
// horizontal and vertical axes.
//Set the values of the first two parameters
// following ns to specify the x and y coordinates of
// the lower-left corner of the rectangle.
//Set the final two parameters to specify the width
// and height of the rectangle.
//By default the outline of the rectangle (the stroke)
// is one pixel wide and black.
//You can insert as many statements of this type as
// you need, one for each rectangle.
//Give each rectangle a unique name such as rectA,
// rectB, rectC, etc.
//Don't make any other changes to the code.
//The rectangle drawn by this statement barely fits
// inside the 8.5x11 inch canvas with a portrait
// layout.
Element rectA = SvgLib21.makeRect(svg,
ns,
"rectangle",
0.05,
0.05,
8.4,
10.9
);

//CIRCLE
//The following code can be used to draw a circle.
//Set the first two parameters following ns to
// specify the x and y coordinates of the center of
// the circle.
//Set the third parameter to specify the radius of
// the circle.
//By default the outline of the circle (the stroke)
// is one pixel wide and black.
//You can insert as many statements of this type as
// you need, one for each circle.
//Give each circle a unique name such as circleA,
// circleB, circleC, etc.
//Don't make any other changes to the code.
// The circle drawn by this statement is centered in
// the canvas. The radius is slightly less than half
// the width of the canvas.
Element circleA = SvgLib21.makeCircle(svg,
ns,
"circle",
4.25,
5.5,
4.15
);

//ELLIPSE
//The following code can be used to draw an ellipse
// whose major and minor axes are parallel to the
// horizontal and vertical axes.
//Set the first two parameters following ns to
// specify the x and y coordinates of the center of
// the ellipse.
//Set the third parameter to specify the horizontal
//Set the fourth parameter to specify the vertical
//By default the outline of the ellipse (the stroke)
// is one pixel wide and black.
//You can insert as many statements of this type as
// you need, one for each ellipse.
//Give each ellipse a unique name such as ellipseA,
// ellipseB, ellipseC, etc.
//Don't make any other changes to the code.
//The ellipse drawn by this statement is centered in
// the canvas. It is two inches wide and one inch
// high.
Element ellipseA = SvgLib21.makeEllipse(svg,
ns,
"ellipse",
4.25,
5.5,
1.0,
0.5
);

//POLYLINE
//The following code can be used to draw a polyline,
// which is a line constructed from a set of line
// segments that extend from one set of x,y
// coordinate values to the next set of x,y
// coordinate values.
//This is the most versatile of all of the shapes.
// With enough patience, it can be used to draw any
// shape that can be drawn with curved lines. To
// draw a curved line, approximate it using a large
// number of short line segments.
//Insert any number of x,y coordinate-pairs inside
// the curly brackets.
//By default, the polyline is black with a line width
// (thickness) of one pixel.
//You can insert as many statements of this type as
// you need, one for each polyline.
//Give each polyline a unique name such as polylineA,
// polylineB, polylineC, etc.
//Don't make any other changes to the code.
//The polyline drawn by the coordinate values used
// here consists of two line segments that form two
// sides of a triangle with the third or top side
// missing.
Element polylineA = SvgLib21.makePolyline(
svg,
ns,
"polyline",
new double[]{
3.25,4.02,
4.25,3.01,
5.25,4.02
});

//POLYGON
//The following code can be used to draw a polygon,
// which is like a polyline except that an extra line
// is automatically drawn to connect the last point
// to the first point. You can use a polygon to draw
// any closed shape.
//For example, you could use a polygon to draw a
// rectangle whose sides are not parallel to the
// horizontal and vertical axes, or an ellipse whose
// axes are not parallel to the horizontal and
// vertical axes.
//Insert any number of x,y coordinate-pairs inside
// the curly brackets.
//By default, the polygon is black with a line
// thickness of one pixel.
//You can insert as many statements of this type as
// you need, one for each polygon.
//Give each polygon a unique name such as polygonA,
// polygonB, polygonC, etc.
//Don't make any other changes to the code.
//The polygon drawn by the coordinate values used
// here draws two line segments that form two sides of
// a triangle with the third or top side being
// automatically drawn.
Element polygonA = SvgLib21.makePolygon(svg,
ns,
"polygon",
new double[]{
3.25,8.02,
4.25,7.01,
5.25,8.02
});

//TEXT
//The following code can be used to add one line of
// text to the drawing.
//Set the values of the first two parameters
// following ns to specify the x and y coordinates of
// the bottom left corner of the first letter in the
// line of text.
//Set the third parameter following ns to the name of
// the font family. If no name or an invalid name is
// entered between the quotation marks, a default
// font family will be used.
//Set the fourth parameter following ns to the
// desired size of the text in points.
//Set the last parameter to the string of text that
// is to be drawn.
//By default the text is normal (not bold, not
// italic, etc.).
//You can insert as many statements of this type as
// you need, one for each line of text.
//Give each line of text a unique name such as textA,
// textB, textC, etc.
//Don't make any other changes to the code.
//The line of text drawn by the following statement
// is positioned 2.125 inches from the left edge of
// the canvas one inch up from the bottom.
//The bold italic decoration will be applied later.
Element textA = SvgLib21.makeText(
svg,
ns,
2.125,
1.00,
"arial",
36,
"Here is some bold italic text."
);

//Decorate the objects in the drawing.

//FONT STYLE
//The following code can be used to set the font
// style to normal | italic | oblique where
// the | character means you must specify one of the
// choices as a parameter.
//Set the value of the first parameter to the name of
// the line of text being modified.
//Set the value of the second parameter to one of the
// available choices.
//Each time you call this method, you must pass a
// reference to an existing text object as the first
// parameter.
//Don't make any other changes to the code.
//The following statement changes the style of textA
// from normal to italic.
SvgLib21.setFontStyle(textA,
"italic"
);

//FONT WEIGHT
//The following code can be used to set the font
// weight to normal | bold | bolder | lighter | 100 |
// 200 | 300| 400 | 500 | 600 | 700 | 800 | 900
// where the | character means you must specify one
// of the choices as a parameter.
//Set the value of the first parameter to the name of
// the line of text being modified.
//Set the value of the second parameter to one of the
// available choices.
//Each time you call this method, you must pass a
// reference to an existing text object as the first
// parameter.
//Don't make any other changes to the code.
//The following statement statement changes the
// weight of textA from its previous weight to bold.
SvgLib21.setFontWeight(textA,
"bold"
);

//LINE WIDTH
//The following code can be used to specify the
// stroke (line) width for rectangles, circles,
// ellipses, lines, polylines, and polygons.
//Set the value of the first parameter to the name of
// the object whose line width is being modified.
//Set the second parameter to the value of the
// desired line width in inches.
//Each time you call the method, you must pass a
// reference to an existing object as the first
// parameter
//Don't make any other changes to the code.
//Note that when you increase the thickness of a line,
// the original one-pixel line remains in the center
// of the new thicker line. In other words, the
// thickness of the line increases on both sides of
// the original line.

// The following statement changes the line width of
// the rectangle to 0.1 inch.
SvgLib21.setStrokeWidth(rectA,0.1);

// The following statement changes the line width of
// the ellipse to 0.25 inch.
SvgLib21.setStrokeWidth(ellipseA,0.25);

// The following statement changes the line width of
// the polyline to 0.15 inch.
SvgLib21.setStrokeWidth(polylineA,0.15);

// The following statement changes the line width of
// the polygon to 0.15 inch.
SvgLib21.setStrokeWidth(polygonA,0.15);

// The following statement changes the line width of
// the line to 0.1 inch.
SvgLib21.setStrokeWidth(lineA,0.1);

// The following statement changes the line width of
// the circle to 0.1 inch.
SvgLib21.setStrokeWidth(circleA,0.1);

//With the exception of the code to write the output
// file, the following code may not be of interest
// to blind students. However, it may be of interest
// to students with low vision, so I am including it
// for completeness.

//STROKE OPACITY
//The following code can be used to specify the
// stroke opacity for rectangles, circles, ellipses,
// lines, polylines, and polygons.
//Set the value of the first parameter to the name of
// the object whose stroke opacity is being modified.
//Set the second parameter to the value of the
// desired opacity level. A value of 0.0 causes the
// stroke to be totally transparent. A value of 1.0
// causes the stroke to be completely opaque. Values
// between 0.0 and 1.0 result in a proportional
// opacity level.
//Each time you call the method, you must pass a
// reference to an existing object as the first
// parameter
//Don't make any other changes to the code.
//The following statement changes the line to be
//40-percent opaque, or 60-percent transparent,
// whichever you prefer.
SvgLib21.setStrokeOpacity(lineA,0.4);

//FILL COLOR
//The following code can be used to specify the fill
// color for closed shapes such as rectangles,
// circles, ellipses, and polygons. It can also be
// applied to polylines, but the results may not be
// what you expect.
//Set the value of the first parameter to the name of
// the object whose fill color is being modified.
//Set the second parameter to the name of the desired
// color.  The fill color can be set to "none" or to
// the name of any of the colors at
// http://www.w3.org/TR/SVG/types.html#ColorKeywords,
// and possibly some other values as well.
//Each time you call the method, you must pass a
// reference to an existing object as the first
// parameter
//Don't make any other changes to the code.
//The following statement changes the fill color for
// the polygon from its previous fill color to dark
// blue.
SvgLib21.setFill(polygonA,"blue");

//FILL OPACITY
//The following code can be used to specify the fill
// opacity for rectangles, circles, ellipses,
// polylines, and polygons. (As with fill color, it
// might not work as expected with polylines.)
//Set the value of the first parameter to the name of
// the object whose fill opacity is being modified.
//Set the second parameter to the value of the
// desired opacity level (see the discussion regarding
// opacity values above).
// Each time you call the method, you must pass a
// reference to an existing object as the first
// parameter
//Don't make any other changes to the code.
//The following statement changes the dark blue fill
// for the polygon to become only 30-percent opaque.
// Because the background underneath the fill is
// white, this causes the visible color of the fill
// to change to a light blue.
SvgLib21.setFillOpacity(polygonA,0.3);

//STROKE COLOR
//The following code can be used to specify the
// stroke color for rectangles, circles, ellipses,
// lines, polylines, and polygons.
//Set the value of the first parameter to the name of
// the object whose stroke color is being modified.
//Set the second parameter to the name of the desired
// color.  (See the discussion of available colors
// above.)
//Each time you call the method, you must pass a
// reference to an existing object as the first
// parameter.
//Don't make any other changes to the code.
//The following statement changes the stroke color
// for the polygon from its previous color to red.
SvgLib21.setStroke(polygonA,"red");

//WRITE OUTPUT FILE
//The following code can be used to write an output
// file containing the instructions needed by an svg
// processor (such as a browser) to display the
// drawing.
//This must be the last statement that you write in
// your program. Otherwise, you will get an
// incomplete file.
//Set the value of the first parameter to the desired
// path and name for the file. Always specify the
// extension to be svg.
//Don't make any other changes to the code.
//The following code writes the output file with the
// name Svg21.svg in the folder from which the
// program is being executed (the current folder).
//Don't include extension in output file name.
SvgLib21.writePrettyFile("Svg21",doc);

//ONLY THE CODE ABOVE THIS LINE CAN BE MODIFIED
//##################################################//
//DO NOT MODIFY ANY OF THE FOLLOWING CODE.
}//end main
//----------------------------------------------------//

//Create a String variable containing the namespace
// URI to reduce the amount of typing that is required
// later. Note that the variable name is short and
// easy to type.
static String ns = "http://www.w3.org/2000/svg";

//For clarity, create strings containing the name of
// the element that is constrained by the DTD (the
// root element), the Public ID of the DTD, and the
// System ID of the DTD.
static String dtdConstrainedElement = "svg";
static String dtdPublicID = "-//W3C//DTD SVG 1.1//EN";
static String dtdSystemID =
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";

static DocType docType = new DocType(
dtdConstrainedElement,dtdPublicID,dtdSystemID);
}//end class Svg21


## Miscellaneous

This section contains a variety of miscellaneous information.

### Note:

Housekeeping material
• Module name: If You Can Imagine It, You Can Draw It using SVG
• File: Phy1002.htm
• Keywords:
• physics
• accessible
• accessibility
• blind
• graph board
• protractor
• refreshable Braille display
• JavaScript
• trigonometry
• SVG
• scalable vector graphics

### Note:

Disclaimers:

Financial : Although the Connexions site makes it possible for you to download a PDF file for this module at no charge, and also makes it possible for you to purchase a pre-printed version of the PDF file, you should be aware that some of the HTML elements in this module may not translate well into PDF.

I also want you to know that I receive no financial compensation from the Connexions website even if you purchase the PDF version of the module.

Affiliation : I am a professor of Computer Information Technology at Austin Community College in Austin, TX.

-end-

## Content actions

PDF | EPUB (?)

### What is an EPUB file?

EPUB is an electronic book format that can be read on a variety of mobile devices.

My Favorites (?)

'My Favorites' is a special kind of lens which you can use to bookmark modules and collections. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need an account to use 'My Favorites'.

| A lens I own (?)

#### Definition of a lens

##### Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

##### What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

##### Who can create a lens?

Any individual member, a community, or a respected organization.

##### What are tags?

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

| External bookmarks