SVG ClipPath images

With SVG we can add a clipping path to change the shape of our images.

First we open a SVG tag with namespaced href attribute and namespace definition:

<svg class="svg-graphic" width="180" height="200" viewBox="0 0 560 645" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">

Then we create a clipPath and give it an ID, which will be applied to our image as a reference. The clipPath we design will be the visible part of our image. In this case we use an hexagon (the external group element <g> solves a bug on Safari).

<g>
   <clipPath id="hexagonal-mask">
      <polygon points="130,0 0,160 0,485 270,645 560,485 560,160" />
   </clipPath>
</g>

Finally we apply the path to our image. It's a precious technique because if we wrap the image in a link, it will not have the usual rectangular shape but the one of our clipPath (in this case hexagonal). We can do in this way:

<a xlink:href="http://www. web-expert.it">
    <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="img.jpg" />
</a>

Here's the final code:

<svg class="svg-graphic" width="180" height="200" viewBox="0 0 560 645" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
    <g>
       <clipPath id="hexagonal-mask">
          <polygon points="130,0 0,160 0,485 270,645 560,485 560,160" />
       </clipPath>
    </g> 
    <a xlink:href="http://www. web-expert.it">
     <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="img.jpg" />
    </a>
</svg>

Check out an example here: http://www.web-expert.it/summer-lab/vintage-airlines/demos/vintage-airlines.html