On the web, custom cropped images have traditionally been the responsibility of an image production workflow. Whoever provides the images crops them to a shape, set them in a rectangular PNG, and… there we have custom shaped images on the web.
Today, though, we have more options to make custom cropped shapes in a more programmatic way. It requires less production time, greater flexibility, and less work from the image production side of things.
For a recent project here at Neoteric, Art Design Chicago, we needed a flexible system to apply shapes to images, handled by code rather than a production team. This is how we got here:
CSS clip-path property
CSS has a clip-path property that is part of the CSS Masking Module. It allows you to reference and apply points to create a shape that will clip an element.
This supports Firefox and IE, too. Choose SVG clipPaths over plain CSS clip-path simple shapes if you have complex shapes or text. I used CodePen to mock up and prototype how these SVG clipPath’s would work. Here’s the basic pen that I based Art Design Chicago from:
One of the more tricky things I ran into was that I needed to have the SVG shapes on the page that I was referencing in the clip-path URL. However, since we use the Neoteric CMS—an in-house Ruby on Rails application—we could put the SVG shapes into a partial and put the partial into any view we needed.
I learned a lot about how SVGs work on the web. Take a look at this article on how SVG’s box positioning and coordinate system works. Having an understanding of SVGs helps understand their placement and rendering on the page.