The following is a simple example of an SVG image:
The following is the contents of the text file first.svg which represents the image:
1: <svg version="1.1" baseProfile="full" 2: xmlns="http://www.w3.org/2000/svg" 3: width="300px" height="200px" viewBox="0 0 300 200"> 4: <circle cx="150" cy="100" r="80" fill="red" stroke="blue" stroke-width="10px"/> 5: </svg> 6:
Lines 1-3 contain the SVG tag. Lines 1 and 2 are standard and should be included in every SVG file. They will vary somewhat when we get to more advanced topics. Line 3 sets the size of the image to be 300 pixels wide and 200 pixels tall. The viewbox selects the rectangle in user coordinates that we want to be able to see in the graphic. Here a point (x,y) will be visible if 0≤x≤300 and 0≤y≤200.
Remark: Unfortunately, computer scientists like a different coordinate system than Mathematicians. The y-coordinate increases in the downward direction!
Line 4 represents a circle centered at (150,100) with radius 80. The circle is drawn in blue with a pen of width 10 pixels, and filled with the color red.
Line 5 closes the open SVG tag (from lines 1-3). The SVG tag encloses all tags in the image.
The viewbox determines the rectangle which we draw to. In particular, things outside this rectangle will typically not appear in the graphic. The attribute has the form viewbox="A B C D", and determines the rectangle where A≤x≤A+C and B≤y≤B+D. Typically, I set the width and height parameters to match the values of C and D in the viewbox, respectively.
Here is the above example with the viewbox changed slightly.
1: <svg version="1.1" baseProfile="full" 2: xmlns="http://www.w3.org/2000/svg" 3: width="300px" height="200px" viewBox="100 50 300 200"> 4: <circle cx="150" cy="100" r="80" fill="red" stroke="blue" stroke-width="10px"/> 5: </svg> 6:
You should try to copy the code from one of the above examples and place it in a text file. Then save the file with a .svg extension. Once it is saved, you should be able to open it in your favorite browser.
Debugging: If the image is working in your browser, you should try to mess around with it and then reload it in the browser. Try to change the color, or see what happens if you create two circle tags with different radii and centers. You should even try to create some minor errors in the code to see what happens. Hopefully, your browser detects and describes the errors to you. You may need to open an "error console" to see them.
My favorite browsers are Firefox and Chrome, in part because they work on linux, Mac, and Windows. Here are directions for opening the console in each:
With the console open, you should get constructive error messages.
You can do quite a bit more configuring of the viewbox, and similar things. SVG Essentials by J. David Eisenberg has a good description of how to setup the coordinates for the SVG.
