Thinking Outside the Box with Browser-Compliant Clip Paths

• Project: Several, but we'll focus on Mueller Industries
• Timeline: Winter 2018-2019

When implementing a design for the web, you have lots of choices to make about how you're going to bring certain elements to the screen. With shapes, you have several options:

Border radius is great for simple shapes. I can set the radius on each corner of my rectangle individually, which gives me a lot of flexibility to make rounded rectangles, circles, ovals—even triangles.

Transforms are my go-to tool for creating angles, because I know that no matter how the content grows or shrinks, all the angles across a site will look the same.

CSS clip-path is useful for simple shapes that aren't critical to the design. My biggest issue with using CSS clip-path is that it isn't browser compliant.

Pseudo elements enter the mix when I need to make standalone shapes that don't contain any content, and I don't want to waste markup on an empty element. They're also useful when I want to add a shape to an element that has content, or mask part of that element, without actually touching the element's style. When shaping pseudo elements, I can use any of the CSS methods above to get the effect I want.

For more about making shapes with CSS, check out The Shapes of CSS at CSS-Tricks.

Well, for a lot of reasons! SVGs are small and flexible—they can grow to any shape or aspect ratio without distorting (SVG stands for Scalable Vector Graphics). They're XML-based, so the image is really just a few—well, sometimes more than a few—lines of code. It's easy for me to open up an SVG, look around, and tinker with things until I've got the image I want. This also means I can write code inside the SVG, embedding an image uploaded by a user and showing or hiding layers based on user input. 

Also a huge plus? SVG shapes can be way more complex than anything you could write in CSS. Designers use a vector editor like Adobe Illustrator to create the exact shape they want and export it to an SVG. Then, I can take the code directly from the SVG to the web. When working with simple images, that's exactly what I do—I add the code from the exported SVG directly into the markup or, sometimes, just use the file in an <img> tag. But it's possible to do a lot more.

Let's take a look!

I've used SVG on several sites, but here I'm going to use an example from Mueller Industries, simply because their site uses SVGs everywhere, and these particular SVGs had to handle a lot of user input. This is from a Twig macro called "Kissing Triangles", which I named without thinking about who might see this code someday. The macro allows me to store all my SVG code out of the way and just pass in the data I need to work with.

So, what's happening here?

I have two SVGs, for starters; one for the left triangle and one for the right. Originally they were one unit, but I learned quickly that it was easier to have one SVG per embedded image. So we'll only look at the right triangle. Each SVG declares its width, height, and viewBox. These govern the initial size and aspect ratio of the SVG, which can be changed as needed.

The real magic here is the <clipPath> element. It has an id and a path, which give the clipPath a name and a shape. I define the id myself when I bring the SVG code into Twig. The path is created by the designer in Illustrator, and is exported as a plain <path> element. To turn it into a clipPath, I remove any styles and wrap the <path> tags in a <clipPath>. 

Now that I've created the clipPath, I need something to clip. This SVG has three elements that are actually displayed—it's important to note that clipPaths are only used as a reference and are never actually visible on the page. The visible elements are are two rectangles with a blue fill and an image that the user uploads in the CMS. 

All I have to do now is add clip-path="url(#kissing-triangle-right)" to the elements I want to clip, and just like that, I've cut out my shapes! The clipPath works relative to the SVG's bounding box, so even when cutting out multiple shapes you can always be sure that everything will line up. It takes a bit of setup to get to this point, but in the end clipping images and shapes in SVG is just about one attribute.

Some more points of interest in this SVG:

The first <rect> is the same size and shape as the <image> above it, so it's only there as a fallback if the user doesn't upload an image. 

The preserveAspectRatio attribute is a great tool, and will probably get its own post. All I'll say here is that on this image, preserveAspectRatio="xMidYMid slice" gives you the same result as background-size: cover; background-position: center; on a CSS background image.

The second <rect> element is conditionally rendered based on whether the user includes a quote to display over the triangle. That kind of flexibility is so powerful, and with SVGs, so easy to implement.

So. SVGs are dynamic, scalable, and designer-friendly. They're also super browser compatible, much more so than CSS clip-path. They aren't always the solution to creating shapes on the web, but I find myself reaching for them more often than not—and maybe now you will too!

Check out more clipPaths in action at Fedex Family House and Madonna Learning Center.