Collision detection in SVG are really powerful. There are already SVG built in functions called getIntersectionList() and checkIntersection(). These function are not fully supported in all Browser, and they just check for bounding box collisions anyway. So we try to avoid these problems and build a simple collision detection by our own. Since SVG objects are Vector based, its really easy to to check for a collision of two objects with simple math.

simple collision detection

Basic bounding box collision detection, the fast way to detect collision. Each object on the screen have bounding boxes, which is the smallest rectangle in which the object fits exactly. With a simple math function is it possible to check if two of these rectangles overlap.

( Drag & drop white circle )

As you can see, the collision detection is really inaccurately. Since we are just checking for the intersection of the Bounding boxes, this is an expected behavior. In some cases this might be enough for a collision detection.

function intersectRect(r1, r2) {
    var r1 = r1.getBoundingClientRect();    //BOUNDING BOX OF THE FIRST OBJECT
    var r2 = r2.getBoundingClientRect();    //BOUNDING BOX OF THE SECOND OBJECT

    //CHECK IF THE TWO BOUNDING BOXES OVERLAP
  return !(r2.left > r1.right || 
           r2.right < r1.left || 
           r2.top > r1.bottom ||
           r2.bottom < r1.top);
}

advanced collision detection

Based of the simple bounding box collision, we create a more precise collision detection. We start to compute the precise collision detection only if a bounding box collision is detected. Once the basic collision detection appears, we define some points on the contour of the colliding objects, based on the precision value. To get these points we use the getPointAtLength() function. In this case, where we just have circles, we calculate the these points with some math.
A precision of 10 means, 10 points on the whole path to calculate if they are colliding with something. We test which of these points is inside the closed path of the colliding object, to check if a collision appears. More precision equals more points to compute.

( Drag & drop white circle )

Most of the code is used to display the debug lines, and it is not a very clean code either. The relevant part of the code is the isPointInPoly() function. We have to provide two variables to the function. The poly variable is an array of points with x and y positions which build a closed path. The pt variable is the position of the point which we want to check if it is inside the closed path or not. If so, a collision is detected.

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/math/is-point-in-poly [rev. #0]

function isPointInPoly(poly, pt){
    for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
        ((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y))
        && (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x)
        && (c = !c);
    return c;
}

conclusion

Basic vector collision detection made easy, decide by your own how precise and how fast collision detection appears. This is just the a basic example and let plenty of room for optimization. It highly depends on the precision value how much optimization is to implement.