Using SVG clipPath for images

SVG clipPath is a powerful tool to create fancy shapes for images. It's a bit more complex than CSS clip-path, but it's worth the effort. In this post, I'll show you how to use SVG clipPath to create a fancy image shape.

SVG clipPath #

SVG clipPath is an SVG element that defines a clipping path. It's used to clip an image or other SVG elements. The clipPath element is defined inside the SVG element and can contain any SVG shape or path.

Consider the following SVG design; Something you might export from Figma.

<svg viewBox="0 0 591 561" xmlns="http://www.w3.org/2000/svg">
	<text font-family="Georgia-Bold, Georgia" font-size="30" font-weight="700" transform="translate(51 382)">
		<tspan x="0" y="0">Card title</tspan>
	</text>
	<text font-family="Georgia, Georgia" font-size="18" transform="translate(52.2 415.6)">
		<tspan x="0" y="0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</tspan>
		<tspan x="0" y="21.6">Quisque vitae elit</tspan>
		<tspan x="0" y="43.2">pellentesque, porta nunc in, gravida felis. Curabitur fini</tspan>
		<tspan x="440.4" y="43.2">-</tspan>
		<tspan x="0" y="64.8">bus, sapien euismod pellentesque pulvinar.</tspan>
	</text>
	<path title="This part is important!" d="m591 0h-508.7l-69.1 71.1 38.8 229.5 122.8-99.6 136.1 12.5 41.7 72.2h114.2l31.7-55 92.5 8.5z"/>
</svg>

The designer has created this fancy clip-path. How to use this on an image? If you open the svg in text editor find the path and copy that part.

So from the d property of the path element, we have the following path.

m82.3 0-69.1 71.1 38.9 229.4 122.8-99.6 416.2 38.2v-239.1zm14.3 109.9-30.9 3.7-18.7-24.9 12.2-28.6 30.9-3.7 18.7 24.9z

Copy the content of the path p attribute <path d="content"> and go to https://yoksel.github.io/relative-clip-path/

Drop it in the tool and copy the SVG + HTML part.

<svg class="svg">
  <clipPath id="clip_my_clip" clipPathUnits="objectBoundingBox"><path d="m1,0 h-0.88 l-0.12,0.237,0.067,0.763,0.213,-0.331,0.236,0.042,0.072,0.24 h0.198 l0.055,-0.183,0.16,0.028"></path></clipPath>
</svg>

Now with this you can use it as clip-path like so:

.clippy {
  clip-path: url(#clip_my_clip);
}

Amazing right? This is something I use almost every project now.

What I also have most of the time is an SVG inline in the html document containing symbols and clipPaths. This way I can use the clipPath in multiple places. I make sure these are not super complex SVG shapes. Because that would make alot of text and initial load.

Here is an example of such an SVG.

{%- comment -%}
    SVG Include, this allows for using symbols like so:

    <svg><use href="#id"></use></svg>
{%- endcomment -%}
<svg height="0" width="0" style="position: absolute;" xmlns="http://www.w3.org/2000/svg">

    {%- comment -%}
        Menu clip-path for 'rounding' leaf.
    {%- endcomment -%}
    <clipPath id="svg_clip_menu" clipPathUnits="objectBoundingBox"><path d="m1,1 v-1 h-1 c0.284,0.379,0.622,0.712,1,1"></path></clipPath>

    {% comment %}Socials in footer{% endcomment %}
    <symbol id="svg_facebook" viewBox="0 0 36 36"><path d="m19.46 27v-8.21h2.89l.43-3.2h-3.33v-2.04c0-.93.27-1.56 1.67-1.56h1.78v-2.86c-.31-.04-1.36-.13-2.59-.13-2.57 0-4.32 1.49-4.32 4.23v2.36h-2.9v3.2h2.9v8.21z"/></symbol>
    <symbol id="svg_x" viewBox="0 0 36 36"><path d="m9 11.42c0-.58.2-1.05.61-1.43s.93-.56 1.58-.56 1.15.18 1.55.55c.4.38.61.88.61 1.49 0 .55-.2 1.02-.59 1.39-.4.38-.94.57-1.6.57h-.02c-.64 0-1.15-.19-1.55-.57-.39-.38-.59-.86-.59-1.44zm.23 15.15v-11.57h3.86v11.57zm5.99 0h3.86v-6.46c0-.4.05-.72.14-.94.16-.39.41-.72.74-1 .33-.27.74-.41 1.24-.41 1.3 0 1.95.87 1.95 2.61v6.18h3.86v-6.63c0-1.71-.41-3-1.22-3.89-.81-.88-1.88-1.32-3.21-1.32-1.49 0-2.66.64-3.49 1.92v.03h-.02l.02-.03v-1.64h-3.86c.02.37.04 1.52.04 3.45s-.01 4.63-.04 8.12z"/></symbol>
    <symbol id="svg_instagram" viewBox="0 0 36 36"><path d="m21.03 10.7s.84 0 .84 0l.31.06c.21.04.39.09.56.16.17.06.33.14.49.23s.3.17.43.26.24.18.34.28.25.13.47.08c.21-.05.44-.12.68-.2.24-.09.48-.18.72-.29s.38-.18.44-.21c.05-.03.08-.05.08-.05s.02-.01.02-.01h.02s.02-.02.02-.02h.02s0-.01 0-.01.02 0 .02 0h.02s0 .02 0 .02v.02s-.01.02-.01.02v.02s-.02.02-.02.02v.02s-.02.02-.02.02c0 .02-.01.04-.02.06 0 .03-.06.14-.15.32-.1.19-.22.38-.37.58-.15.19-.28.34-.39.44-.12.1-.19.17-.23.21s-.08.08-.14.11l-.08.05h-.02s-.02.02-.02.02h-.02s-.02.02-.02.02h.08l.45-.1c.3-.06.59-.14.87-.24l.44-.15.05-.02h.02s.02-.02.02-.02h.02s.02-.02.02-.02h.02s.03-.01.03-.01h.03s0 .03 0 .03v.02s-.02.02-.02.02-.07.1-.21.28-.21.27-.22.28c-.01 0-.03.02-.05.05s-.13.15-.34.36-.42.4-.62.56c-.2.17-.31.37-.31.61s-.02.51-.04.81-.06.63-.12.98-.15.75-.28 1.19c-.12.44-.28.88-.45 1.3-.18.42-.37.8-.56 1.13s-.37.62-.54.85-.33.45-.5.66-.38.44-.64.69c-.26.26-.4.4-.42.42s-.13.11-.32.27c-.19.15-.39.31-.6.46s-.41.28-.59.38-.39.22-.65.35c-.25.13-.52.26-.81.37s-.6.22-.93.32c-.32.1-.64.17-.94.23-.3.05-.65.1-1.03.14l-.58.06s-1.06 0-1.06 0-.14-.02-.14-.02c-.09 0-.17-.01-.23-.02-.06 0-.28-.04-.67-.09s-.7-.11-.92-.16-.55-.16-.99-.31-.81-.3-1.12-.46c-.31-.15-.51-.25-.58-.29-.08-.04-.17-.09-.26-.15l-.15-.09s0 0 0 0h-.02s-.02-.02-.02-.02v-.03h.02s.02 0 .02 0h.07s.18.02.4.03.45.01.69 0 .49-.04.75-.07.55-.1.9-.19.66-.2.95-.33.49-.22.62-.29c.12-.06.31-.18.56-.34l.37-.25s0 0 0 0h.02s.02 0 .02 0v-.02s0-.02 0-.02h-.13c-.09-.01-.17-.02-.25-.02s-.21-.03-.38-.07-.36-.11-.56-.19c-.2-.09-.39-.19-.58-.31s-.33-.22-.41-.3-.19-.19-.32-.33-.25-.29-.34-.44c-.1-.15-.19-.33-.28-.52l-.13-.3v-.02s-.02-.02-.02-.02v-.02s0-.02 0-.02h.02s.02 0 .02 0l.18.02c.12.02.31.02.56.02s.43-.02.53-.03c.1-.02.16-.03.18-.03h.03s.04-.02.04-.02h.04s0-.01 0-.01-.03-.01-.03-.01h-.03s-.03-.02-.03-.02h-.03s-.03-.02-.03-.02c-.02 0-.06-.02-.11-.03-.05-.02-.2-.08-.44-.18s-.43-.2-.57-.3-.28-.2-.4-.32c-.13-.12-.27-.27-.42-.45s-.29-.4-.41-.64-.21-.48-.27-.7-.1-.45-.12-.67l-.03-.34h.02s.02 0 .02 0h.02s.02.02.02.02h.02s.02.02.02.02l.25.11c.17.08.38.14.62.19l.45.09h.07s.15 0 .15 0h-.02s-.02-.02-.02-.02h-.02s-.02-.02-.02-.02-.05-.04-.14-.11-.18-.16-.28-.26c-.1-.11-.19-.22-.29-.34s-.18-.25-.26-.38c-.08-.14-.16-.31-.24-.52s-.15-.42-.19-.63-.07-.42-.07-.62c0-.21 0-.38.02-.53s.05-.31.1-.49.12-.38.21-.58l.14-.31v-.02s.02-.02.02-.02v.02s.02.02.02.02l.22.24c.15.16.32.34.52.54s.31.3.33.31c.02 0 .05.03.08.07s.14.14.32.29.42.33.72.53.63.4.99.59.75.37 1.17.53.71.26.88.31.45.11.86.19.71.12.92.15c.21.02.35.03.42.04h.11s0-.02 0-.02v-.02s-.04-.2-.04-.2c-.02-.14-.03-.32-.03-.57s.02-.47.06-.67c.04-.21.09-.41.17-.62s.15-.38.22-.51.17-.27.29-.43.27-.33.46-.5.41-.33.65-.46c.24-.14.47-.24.67-.31.21-.07.38-.12.52-.14s.21-.03.21-.04z"/></symbol>
    <symbol id="svg_linkedin" viewBox="0 0 36 36"><path d="m9 18c0-3.6 0-5.39.86-6.69.38-.58.88-1.07 1.46-1.46 1.29-.86 3.09-.86 6.69-.86s5.39 0 6.69.86c.58.38 1.07.88 1.46 1.46.86 1.29.86 3.09.86 6.69s0 5.39-.86 6.69c-.38.58-.88 1.07-1.46 1.46-1.29.86-3.09.86-6.69.86s-5.39 0-6.69-.86c-.58-.38-1.07-.88-1.46-1.46-.86-1.29-.86-3.09-.86-6.69zm13.66 0c0 2.57-2.09 4.66-4.66 4.66s-4.66-2.09-4.66-4.66 2.09-4.66 4.66-4.66 4.66 2.09 4.66 4.66zm-4.66 3.08c1.7 0 3.08-1.38 3.08-3.08s-1.38-3.08-3.08-3.08-3.08 1.38-3.08 3.08 1.38 3.08 3.08 3.08zm4.84-6.88c.6 0 1.09-.49 1.09-1.09s-.49-1.09-1.09-1.09-1.1.49-1.1 1.09.49 1.09 1.1 1.09z" fill-rule="evenodd"/></symbol>
    <symbol id="svg_youtube" viewBox="0 0 36 36"><path d="m27.82 15.87c-.15-1.92-.2-4.19-2.45-4.59-.46-.08-.92-.16-1.38-.17-4.38-.14-8.79-.18-13.18.13-1.3.09-2.14.87-2.35 2.19-.38 2.35-.46 4.76-.26 7.13.15 1.68.28 3.69 2.25 4.1 1.29.27 2.61.22 3.92.25l4.06.08s.02 0 .02.01c2.26.04 4.47-.09 6.72-.26 1.8-.13 2.23-1.46 2.45-3.05.28-1.92.34-3.87.19-5.8zm-11.77 5.08v-5.94c1.69.99 3.35 1.97 5.06 2.97-1.69.99-3.36 1.97-5.06 2.97z"/></symbol>

    {% comment %}Special svg for the checklist element items{% endcomment %}
    <symbol id="svg_checklist" viewBox="0 0 21 22"><path d="m10.4 21.1c5.6 0 10.1-4.5 10.1-10.1s-4.5-10.2-10.1-10.2-10.1 4.6-10.1 10.2 4.5 10.1 10.1 10.1z"/><path d="m5.8 11.6 2.6 2.6 6.6-6.6" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6"/></symbol>

</svg>

This way I can reuse symbols and clipPaths in multiple places without having to copy paste or render same svg everywhere.

Thanks for reading! 🎉

• Next: Using CSS mask-image in marquee swiper
• Previous: Bye bye X.