SVG Coordinate System

Scalable Vector Graphics Coordinate System SVG coordinate or grid system is similar to the one used by the canvas element in HTML5. The top left corner of the document is considered to be point (0,0). Positions are measured in pixels from the top left corner.

Look at this example of a rectangle postioned 60px from the left (x) and 20px from the top (y) of its enclosing parent element.

<div style="padding:0; margin:0; border: thin solid black;">
    <svg xmlns="" xmlns:xlink="">

            <rect x="60" y="20" height="90" width="170" style="stroke:#BBBBBB; stroke-width: 16; fill: #529587"/>