Wouldn’t it be great to break out of those rectangular shapes for images on websites? This is certainly what our Designer thought when working on a new design recently. It is important to us that designers and developers are working hand in hand; there are tons of issues if they don’t, so we encourage regular conversation between the two.

As we were talking about the design, the initial reaction of the developer team was: “I have no clue how to do all these curves and slopes, but it looks cool!”.

I find moments like that quite inspiring. Not knowing is the exciting part, since there is new insight to be gained.

We were looking at various images, cut off with a slope or curve. Of course you could simply make those images in the shape required, but this approach has some drawbacks as we quickly realised.

Clipping in CSS

Luckily there is a CSS solution for this. The clip-path property allows us to define a specific region of an element to display, rather than showing the complete area. However, browser support is great but still limited [4] and we were looking for a solution that would work today in almost all browsers, including IE and Edge. If you like to read more about it, there is a great article on CSS clip path on Smashing Magazine [1].

We knew that CSS clip path is the right thing to do, so ideally we are looking for a solution that works around the current limitations but its implementation details could be changed later to use CSS clip path once this is more supported in the near future.

The next best thing that comes to mind are SVG clip paths: Very similar in concept but — as it turns out — much wider supported today. This is what we went with and it turned out to be quite a robust solution to our problem.

We are still going to use the clip-path CSS property, but instead of defining the clip path shape in CSS and having it acting on any arbitrary DOM element, we will use SVG instead. Both, the clip path itself and the targeted image need to live in SVG land in order to make this solution as widely supported as possible.

Responsive and lazy-loaded

Another constraint which was quite important to us is responsive images and lazy-loaded images. The platform we are using supports a responsive and lazy-loaded image solution. Every image is loaded by the browser when visible. In addition, the correct image size based on device properties, such as resolution and pixel density is taken into consideration. A great article about this technique in available on Smashing Magazine [3].

Ideally we would like to apply arbitrary clip paths to any lazy-loaded image and the clip path would need to scale with the image. Further more, the space that is occupied by the image should be present in the document, even if the image has not been loaded yet, which is part of the lazy-load solution that is already in place. This prevents content from being pushed down once the image has been loaded.

SVG Clip Path

So enough talking, let’s dive into the solution we ended up using: It is composed out of two components: The image and the clip path. The later is defined within its own SVG container in the following way:

<svg id="svg-defs" width="0" height="0">
  <defs>
    <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
      <path id="clip-path-curve" d="M1,0L1,0.865C0.867,0.949 0.688,1 0.491,1C0.303,1 0.131,0.953 0,0.876L0,0L1,0Z"/>
    </clipPath> 
  </defs>
</svg>

The container does not have any dimensions (0x0 in size) and can be defined anywhere within the body of the document. We define the clip path via the <clipPath> tag. The clip path itself is made up by any SVG shapes, for example a path. Please note that we use objectBoundingBox for the clipPathUnits attribute. This way the path can be defined in percentage values (0.0 to 1.0) based on the bounding box of the object the clip path is assigned to. This is great for responsive images, because the clip path will simply resize itself according to the image.

A great online tool for creating clip paths is Clippy [2], although it generates CSS clip paths rather than SVG paths.

SVG Image

The other part of the solution is the image itself. It must live in SVG space, so we define it as an SVG image (instead of the good old HTML img tag) in the following way:

<div class="article-image" style="padding-bottom: 56.22222222222233%">
  <svg viewBox="0 0 100 56.22222222222233" width="100%" height="100%">
    <image width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://www.innershed.com/media/shapes/original/large/0/35/shed-about-us.jpg" style="clip-path: url(#clip-path);"></image>
  </svg>
</div>

The container (.article-image) is defined with zero height (see CSS below) and a percentage value for padding-bottom. This solution will make the container responsive, following the aspect ration of the image. Padding bottom is defined as 100 / ar, where ar is the aspect ratio of the image (e.g. width / height). Since the aspect ratio may be different for each image, it is defined as inline style and is injected by the framework transparently.

The SVG container inside is suppose to cover the entire region of its container — ideally. In order to archive this in almost all browsers, we need some additional CSS to make this happen:

.article-image {
  position: relative;
  height: 0;
}

.article-image > svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

We also need to define a viewBox for the SVG container. In order for the SVG image to scale properly, its viewBox should reflect the aspect ratio of the image. We arbitrarily define the viewBox as 0 0 100 x, where x is then identical to the padding-bottom property we are already using on the parent container.

The last bit of the solution is the image itself, which is using the SVG image tag to present an image in the context of the SVG container. To make this solution working in most browsers, this cannot be an HTML img tag. The important part here is the CSS clip path property, which defines the id of the SVG clip path to use. It is given as inline style here, because you might have a different clip path for different images. This way the framework can inject the clip path transparently.

See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href="http://codepen.io/jkueting/pen/LkrwPm/" data-mce-href="http://codepen.io/jkueting/pen/LkrwPm/"&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;LkrwPm&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; by Jan Kueting (&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href="http://codepen.io/jkueting" data-mce-href="http://codepen.io/jkueting"&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;@jkueting&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href="http://codepen.io" data-mce-href="http://codepen.io"&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;.

What we end up with in the template code for a website is a simple template tag to render any image with a clip path of the given name. We assume that the clip-path has been embedded into the template by other means:

{% svg_image image 'header' 'clip-path' %}

The template language in this example is the django templating language. The term image refers to the image object, which also contains the path and the aspect ratio. The term header refers to a specific aspect ratio that is used here and finally clip-path is the id of the SVG-based clip path as defined elsewhere.

Final Words

We got there in the end: This solution allowed us to create irregular shapes in an otherwise rectangular web page - much to the delight of our designer. She indeed started to explore this new capability further with new designs that incorporate curved shapes together with images.

Once standard CSS clip paths become more supported, we might look into replacing SVG images with HTML img tags. Since this is now part of the platform, we should be able to do this transparently without affecting code that is using the solution already.

It is empowering to realise what can happen if you have different disciplines challenging each other. As a developer, It is sometimes all too easy to reject design ideas just because they feel too hard to implement at first. I am not saying that you should always blindly build whatever design throws at you. But in my experience you should be open-minded — ready to accept a challenge. As a team, you might end up expanding your capabilities for future projects.

— Jan

References

[1] CSS SVG clipping and masking techniques.
https://getflywheel.com/layout/css-svg-clipping-and-masking-techniques/

[2] Clippy - An online tool for generating CSS clip path.
http://bennettfeely.com/clippy/

[3] Addressing The Responsive Images Performance Problem: A Case Study.
https://www.smashingmagazine.com/2013/09/responsive-images-performance-problem-case-study/

[4] CSS clip path support (Non-SVG image).
http://caniuse.com/#feat=css-clip-path