How to retrieve position X,Y of html element

How to define in what exactly position (X,Y) is the DOM element on page?
For example you have svg-area on your page and you need to adjust events on it, or 

1) For mouse events you can use event.clientX and event.clientY properties

2) When you use jQuery you can call position() method which will return object with 2 properties:

var position  = $(elem).position();

//position.left, position.top

3)  But if you have to make it in pure javascript you should use getBoundingClientRect() method on your DOM-element. It works like this:

var rect = document.getElementsById('svg').getBoundingClientRect();
//rect.top, rect.right, rect.bottom, rect.left

details about the method on developer.mozilla.org