After the standard language and document definitions, the <svg> element appears. The <svg> element defines the SVG document, and can specify, among other things, the user coordinate system, and various CSS unit specifiers. The line <svg xml:space="preserve" width="3in" height="2in" viewBox="0 0 300 200"> specifies: 1) that whitespace within text elements will be preserved, 2) the "intrinsic" width and height of the SVG document — particularly important for specifying print output size, and 3) the "bounding box" for the elements of the graphic. In the following example, the SVG file is establishing the boundaries of the image, by stating that in a rectangular space, the upper lefthand x, y coordinates are to be set as 0, 0 and the width and height of the viewing area are 300 and 200.

<svg xml:space="preserve" width="3in"
 height="2in" viewBox="0 0 300 200">

The "viewBox" attribute defines the 2D space for the enclosed element. By making the bounding box area smaller, the image can be "cropped" or "pre-zoomed." If the above numbers were changed to 100 75 100 50, the image would look like this:

<svg xml:space="preserve" width="100"
height="50" viewBox="100 75 100 50">

Note that you can still see the whole image by zooming out (on Windows, click the right mouse button, and on the Mac, hold the mouse button down while pressing the control key over the SVG image), however if you select "original," the view will return to the original "zoomed in" view.

Now that we have established the area of the image in which the graphic elements will fit, we can look at the organization of the elements within the file. If your Illustrator file is organized into layers, you will see your layers appear as groups, with each group named <g id= " "> as the layer names specified in Illustrator, followed by a comment tag separating the group. All elements within an Illustrator image are presented in the order they are drawn. For example, the elements that are farthest back in the image are defined first in the SVG file.

The structure of the Illustrator file with key elements grouped together on separate layers is important, not just as an organizational tool, but for reference if the user wants to program animations or interactions later with these particular elements. For instance, if the user wants the square to change shape, but not the text, then by having the square separated on a layer of its own, the user can target that element within the SVG file for some transformation or interactivity.