SVG Coordinate Systems

The Simplest SVG

We can start this journey to the SVG coordinate system by creating the simplest SVG image description: an opening and ending svg xml tag with the xml namespace declaration set to the W3C SVG namespace.

  <svg xmlsns="http://www.w3.org/2000/svg"></svg>

Saving that text to a file with the svg extension just creates a new svg file. In my computer, that file creates an empty, transparent svg image of size 300x150 pixels because it is the default size of a SVG file when no width or height is defined in the context of inline SVG on HTML5, or using image, object or iframe HTML elements. However, if the SVG file is opened directly in a new browser tab, that default size changes. The size of the SVG drawn in a full browser tab is set to the full size of the viewport which its width of 100vw and its height of 100vh.

The default coordinate system of SVG is a two dimensional plane with coordinate points (x, y) where its origin point is equals to (x = 0, y = 0) and it is the upper left-hand corner on any SVG. As we move to the right from the origin the value of the coordinate ‘x’ increases. As we move downward from the origin, the coordinate ‘y’ increases. So, the width of any SVG is the value of ‘x’, and its height is the value of the ‘y’ coordinate. In general, the default unit of this coordinate system is the pixel.

The SVG Canvas and the Viewport

Conceptually, the SVG canvas is the area where the SVG is drawn. It is infinite for any side of the plane where the SVG exists. However, the SVG is rendered relative to a finite portion of a screen called the viewport. One of the concequences of this finite rendering is that any part of a SVG that extends beyond the viewport is clipped off and it is not visible.

Then, the viewport is like a window through a particular view or area of the SVG is visible, and that area may be the entiner SVG as well. The size of the viewport is specified by the width and the height attributes. For example, the following SVG has a viewport of 400 by 400 pixels. That area is inside the teal colored square around the orange circle. The center of the orange circle is in the point (200, 200) and its radius is 100 pixels relative to the viewport coordinate system. As you can see, the entire SVG is rendered on the screen, and at this moment, the viewport and the viewBox coordinate systems are identical and coincide.

  <svg style={'border: 1px solid teal;'} 
    width="400" height="400" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <title>An Orange Colored SVG Illustration</title>
    <circle 
      cx="200" 
      cy="200" 
      r="100" 
      fill="darkorange" 
      stroke="darkorange">
    </circle>
  </svg>

The ViewBox

We have now a SVG with a viewport of 400 by 400 pixels and our own coordinate system, the viewBox, is identical to it. The viewBox has its own syntax: viewBox = min-x min-y width height The min-x and min-y values determine the upper left corner of the viewBox, and the width and height values determine the width and the height of that viewBox. The following SVG has a viewBox of “0 0 400 400”, which in this case is equal to the viewport size, so you cannot see any difference between one rendering and the other.