SVG Clipping Path Examples — Multiple Shapes and Images

Posted: 24 May 2016 05:30 AM PDT

Last week I walked through a few examples using the path element and the text element as clipping paths. I also showed you how to clip elements inside a group as opposed to individually.

Today I want to continue with more examples starting with one where we'll use a variety of SVG elements to build up a more complex clipping path.

Multiple Shapes Inside a clipPath Element

In one of the examples last week I used a single clipping path to clip multiple elements, by grouping the elements and referencing the clipping path on the group as opposed to the individual elements. You can also use multiple SVG elements to create the path.

In this example, I'm sticking with the circle and triangle group from last week. Here's a reminder of what it looked like unclipped.

This week instead of a single element to create a clipping path, I've combined 4 circles, a polygon, and some text to form something of a complex clipping path.

1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17

<svg width="660" height="220" style="outline: 1px solid red">     <defs>       <clipPath id="multiple-1">         <circle cx="112" cy="50" r="30" />         <circle cx="250" cy="80" r="35"/>         <polygon points="155 190, 215 190, 185,155" />         <circle cx="335" cy="195" r="45"/>         <circle cx="465" cy="145" r="25"/>         <text x="10" y="130" font-family="Courier New" font-weight="bold" font-size="4em" >Clipping Path</text>       </clipPath>     </defs>     <g clip-path="url(#multiple-1)">       <polygon points="110 10, 660 110, 110,210" fill="#c99" />       <circle cx="110" cy="110" r="100" fill="#9c6" />     </g>    </svg>

Here's the result. Notice that the clipping path doesn't need to be a single contiguous path. Aside from the text, none of the shapes in the path overlap each other. I also want to call your attention to the two semi-circles at the bottom. These shapes in the path appear to be clipped, but they aren't.

Here's the result again, though this time I added an outline to the two circles in the path that appear to be getting clipped. The blue outline shows the full path as created. The reason they aren't completely filled in is because there's nothing to reveal. These two circles revealed as much as they could of the triangle, but where the triangle ends only the background of the page was left to reveal.

Clipping an Image

Clipping an image is the same as clipping any other element or group of elements. This example uses the same clipping path as the previous examples, but I've replaced the group containing the circle and triangle with an image I took about 10 years ago of the Strawberry Fields memorial for John Lennon in Central Park.

1  2  3  4  5  6  7  8  9  10  11  12  13  14

<svg width="660" height="220" style="outline: 1px solid red">      <defs>        <clipPath id="image">          <circle cx="112" cy="50" r="30" />          <circle cx="250" cy="80" r="35"/>          <polygon points="155 190, 215 190, 185,155" />          <circle cx="335" cy="195" r="45"/>          <circle cx="465" cy="145" r="25"/>          <text x="10" y="130" font-family="Courier New" font-weight="bold" font-size="4em" >Clipping Path</text>        </clipPath>      </defs>     <image width="660" height="495" xlink:href="http://www.vanseodesign.com/blog/wp-content/uploads/2013/09/strawberry-fields.jpg" clip-path="url(#image)"/>     </svg>

At first glance it might appear as though the clipping path is different. You can see more of the two circles at the bottom of the viewport. They are the same though. The image fills the entire viewport, where in the previous examples, some of this area was empty.

Let's close with one more example using the same image of Strawberry Fields. The image is larger than the height of the viewport I've been using to this point. Here's the full image in a taller viewport.

One way you might want to clip this image is to show the circle with the word IMAGINE and clip everything else. I'd also like this to fit inside a viewport that's 330px in height and instead of the red outline, let's change the background color of the SVG element.

1  2  3  4  5  6  7  8  9

<svg width="660" height="330" style="background: #33">      <defs>        <clipPath id="ellipse">         <ellipse cx="335" cy="160" rx="225" ry="100" />        </clipPath>      </defs>     <image width="660" height="495" y="-100" xlink:href="http://www.vanseodesign.com/blog/wp-content/uploads/2013/09/strawberry-fields.jpg" clip-path="url(#ellipse)"/>    </svg>

Because I want only the circle in the center of the image to be visible, I used an ellipse as the clipping path as the circle looks like an ellipse given the angle of the picture. I also moved the image up a little (y=”-100″) so that the word imagine was roughly in the center of the viewport.

Here's the result. I adjusted the values cx, cy, rx, and ry of the ellipse through trial and error until I had something close enough to what I was after.

Images will play even more of a role in SVG masking, which I'll get to next week.

Closing Thoughts

Hopefully you agree that clipping paths are relatively easy to work with in SVG. You create the path inside the clipPath element and you give the clipPath an id that you reference when and where you want to use the clipping path.

You can add the reference to any SVG shape or image and you can add it to a group of elements and images as well.

The main thing with clipping paths is that they're either/or. What's inside the clipping path will be visible and what's outside the clipping path is hidden.

That's not the case with masks which can partially reveal what's beneath the mask. Next week I'll continue this series and talk about masks, which are similar to clipping paths, but can be used for different and I think more interesting effects.

Download a free sample from my book Design Fundamentals.

Join me as I share my creative process and journey as a writer.