blx8kw
Last Updated: October 26, 2016
·
37.72K
· marcosors
Bagnino

SVG ClipPath images

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

Picture

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

Say Thanks
Respond

4 Responses
Add your response

2708

Pretty, it looks much more like an hexagon like this:

<polygon points="270,0 0,160 0,485 270,645 560,485 560,160" />
over 1 year ago ·
8754
037b88e7f43dad2b8a80b140de992231

any way to do curves with this or does it need to be a bunch of points making straight lines?

over 1 year ago ·
8755
037b88e7f43dad2b8a80b140de992231

maybe a better way to phrase the question would be to ask if it's possible to use an svg path out of illustrator which contains curves in it as a mask

over 1 year ago ·
8765
Bagnino
over 1 year ago ·