SVG — Coordinate System & viewBox

An SVG is an infinite sheet of graph paper. The viewBox is the rectangular window you crop out of it, and the browser stretches that window to fill the element. Pan and zoom the window below.

1 · viewBox = pan + zoom

viewBox="min-x min-y width height". Move min-x/min-y to pan; shrink width/height to zoom in (fewer user units fill the same pixels). The shapes never change — only the window does.

0
0
200
200
Live markup

        

World view — the dashed rectangle is your current viewBox window over the full scene:

Notice: when width & height shrink, content looks bigger — that is zoom. The element's pixel size on the page is unchanged.

2 · the basic shapes

Every SVG drawing is built from these primitives. Toggle each one and read its element. Coordinates are in user units, mapped to pixels by the viewBox.

Elements drawn

      

A <polygon> auto-closes back to its first point; a <polyline> stays open. Same points list, different ending.