0.1 Phy1002: if you can imagine it, you can draw it using svg  (Page 10/23)

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 therectangle 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 .

In order to force the SVG code to fit in this publication format, it was necessary for meto 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 youare 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 theattribute 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 valuesto 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") .