Rendering Concept & Others

Keywords: Canvas, Viewport, Viewbox, Painter's Model and Coordinate System

In SVG, all graphics elements are rendered conceptually on to an SVG infinite canvas.

A viewport can be established that defines a finite rectangular region within the canvas. The size of the viewport (its height and width) is defined inside the <svg> element.

The viewport is the portion of the document that is actually visible, and consists of a coordinate system that starts with the point 0,0 in the upper left-hand corner, with the positive x-axis running to the right, and the positive y-axis running downwards. One pixel in the coordinate system corresponds with one pixel in the viewport. Graphic elements are positioned in the viewport via coordinates.

<svg viewbox="0 0 500 300">          .........  </svg>

Coordinates and lengths are assumed to be in "unit space values" if no units follow. The user space value will be equivalent to a pixel. However, in defining the viewport/ viewbox size and in specifying the drawing, the complete set of units defined in CSS are available to user (such as em, ex, px, pt, pc, cm, mm, in, %).

SVG uses a "painter's model" for rendering. The drawing order of SVG elements is "First Comes, First Painted". When an object overlaps a previously painted object, new painted partially or completely obscures the old. Graphics elements are blended into the elements already rendered on the canvas using simple alpha compositing.