The svg element has several methods for establishing an overall coordinate system for the SVG document:

  • viewBox attribute that defines an area in the SVG coordinate space to be mapped to the bounds of the viewport defined by the user agent, mainly a browser. Parameters are the the origin followed by width and height (origx, origy, width, height)
  • width and height attributes to establish the space required from the user agent, if not specified user agent can decide what to allocate
  • both attributes define the space required from the user agent and the units to be used inside the SVG document
  • preserveAspectRatio attribute controls the mapping when aspect ratio of viewBox and user agent window area is different
  • If no viewBox attribute, width and height define the coordinate system to be used by the SVG document as well
viewBox User Agent window width height 
<svg viewBox="0 0 150 100"  width="150" height="100" xmlns="http://www.w3.org/2000/svg"> 
      <path d="M 0 112 L 20 124 L 40 129 L 60 126 . . . </path> 
</svg>
  • svg is the root XML element; it establishes the (initial) coordinate system as 0 to 150 in the x direction and 0 to 100 in the y direction
  • SVG namespace declaration required by all main browsers
  • Browser provides an area width 150 and height 100 for it
  • path is the drawing primitive that defines the duck
  • Changing width and height to width 300 and height 200 causes each SVG unit to be 2 pixels wide in the browser window
<svg viewBox="0 0 150 100"  width="300" height="200" xmlns="http://www.w3.org/2000/svg"> 
      <path d="M 0 112 L 20 124 L 40 129 L 60 126 . . . </path> 
</svg>