All of the graphics in an SVG image are based on a grid of coordinate values, like a piece of graph paper. The location {0,0} is at the top-left corner of the grid. The coordinate values increase as you move to the right or down the grid (or the screen). You can have negative values, but by default they will be outside the viewport, or the visible area of the image. We will talk more about the viewport and the 'viewBox' attribute in a later lesson.

Vector art is different than raster-based graphics. Both are based on a grid of pixels, but the way they color those pixels changes their behavior.

Rasters formats, like JPEG, GIF, and PNG, are just a series of colored dots; each dot has specific information about that one pixel, such as its location, color, and opacity, but it doesn't have a real relationship with the dots around it. As you increase the dimensions of the raster, each dot stays the same size and color relative to all the other dots, but is represented by more points on the grid (or screen pixels), so the image starts to look blocky.

Vectors are sets of instructions that tell the browser or drawing program to start a line at one point on the grid, and move along a specific trajectory to another point on the grid, no matter what the absolute size of the grid is. This is what makes vector images scalable; as the image gets bigger, or the user zooms in or out, the instructions are applied to the new viewport, and a new set of dots is drawn to match that scale, so the image retains its smooth lines.

This also means that each shape in a vector format "knows" what part of the image it belongs to. If you have a picture of a house, and you pick one dot in the middle of the door, the format doesn't indicate if that point, or any of the points around it, are on the door (though sophisticated software may be able to guess based on similarity of color, location, etc.). If you have a vector image of a house, and you have a shape that is drawn as a door, SVG knows which of the points around it are part of that same shape... it knows all the pixels that are part of the door.

Rasters are good for representing real-world pictures, and because they are relatively simple formats, they render quickly. Vectors are good for clean line-art, and for manipulating dynamically, but the more complex they are, the more slowly they may render. In later lessons, we will talk about optimizing your SVG images for performance.

Drawing shapes in SVG is a matter of instructing the browser where to place the dots, what color they are, and so forth. As a very simple example, you can tell the browser to start at point {5,5} (that is, 5 pixels down and to the right of the top-left corner), and draw a straight line to point {25,30} (t25 pixels down and 30 pixels to the right of the top-left corner). Or, you could tell it to draw a rectangle 100 pixels wide and 80 pixels high, starting at point {50,12}, or a circle centered right in the middle of the screen with a diameter half the size of the screen.

The screen knows how many grid points it has in the horizontal and vertical directions, so by indicating relative values in your instructions, you are telling the browser to do some of the math for you. That's one way you can give it friendlier, more intuitive instructions.

Like HTML, there is a particular format that you have to use to give the browser instructions. This is a set of keywords and symbols commonly called "markup". In the next lesson, we will explain the basics of the SVG markup.