<svg style="position:absolute; width:0; height:0;">
	<defs>
    <g id="blue-rectangle">
      <svg width="200" height="100">
        <rect width="200" height="100" style="fill:#00f;" />
      </svg>
    </g>
  </defs>
</svg>
    
    
<div class="column">
  <a href="#" class="icon-link">
    <svg width="200" height="100">
      <rect width="200" height="100" style="fill:#0f0;" />
    </svg>
    
    <div class="icon-link-text">
      SVG direct/embedded<br>Click by document 'on'
    </div>
  </a>

  <div class="log"></div>
</div>

<div class="column">
  <a href="#" class="icon-link">
    <svg><use xlink:href="#blue-rectangle"></use></svg>
    
    <div class="icon-link-text">
      SVG using defs<br>Click by document 'on'
    </div>
  </a>

  <div class="log"></div>
</div>

<div class="column">
  <a href="#" class="icon-link-direct">
    <svg width="200" height="100">
      <rect width="200" height="100" style="fill:#0f0;" />
    </svg>
    
    <div class="icon-link-text">SVG direct/embedded<br>Click by direct 'click'</div>
  </a>

  <div class="log"></div>
</div>

<div class="column">
  <a href="#" class="icon-link-direct">
    <svg><use xlink:href="#blue-rectangle"></use></svg>
    
    <div class="icon-link-text">SVG using defs<br>Click by direct 'click'</div>
  </a>

  <div class="log"></div>
</div>

.column{
  display: inline-block;
  width: 200px;
  vertical-align: top;
}

svg{
  width: 200px;
  height: 100px;  
}

$(document).on('click', '.icon-link', function(event){
  
  $(this).next('.log').append('Click event triggered<br />');
  
  event.preventDefault();
});

$('.icon-link-direct').click(function(event){
  
  $(this).next('.log').append('Click event triggered<br />');
  
  event.preventDefault();
});