Edit in JSFiddle

<div class="conteneur">
    <img src="http://nsa37.casimages.com/img/2015/05/25/150525044603348146.jpg" alt="" />
    <svg xmlnsxlink="http://www.w3.org/2000/svg" viewBox="0 0 400 282.1" class="svg">
        <a xlink:href="http://www.never-utopia.com/" target="blank">
            <path fill="transparent" d="M23.5 28.1h115v115.5h-115z" id="square"/>
        </a>
        <a xlink:href="http://www.never-utopia.com/f1-reglement-annonces" target="blank">
            <path fill="transparent" d="M138.5 177.1l66.5-127h8.5l65 127-5 9.5h-127z" id="triangle" />
        </a>
        <a xlink:href="http://www.never-utopia.com/t12112-reglement-du-forum" target="blank">
            <ellipse fill="transparent" cx="318.5" cy="84.4" rx="58" ry="58.8" id="circle" />
        </a>
    </svg>
</div>

.conteneur {
    position: relative;
    width: 400px;
    margin: auto;
}
.conteneur .svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
#square, #triangle, #circle {
    transition: all 400ms;
    stroke: transparent;
    stroke-width: 5;
}
#square:hover {
    stroke: orange;   
}
#triangle:hover {
    stroke: blue;
}
#circle:hover {
    stroke: green;
}