SVG Clip Paths

clipPath

A <clipPath> masks an element to a custom shape. Anything outside the clip region is invisible.

Example

<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="hex">
      <polygon points="100,10 180,50 180,130 100,170 20,130 20,50"/>
    </clipPath>
  </defs>
  <image href="photo.jpg" x="20" y="10" width="160" height="160"
         clip-path="url(#hex)"/>
</svg>

HTML

Full Editor

Pro Tip

Use clip paths to display images in creative shapes without CSS border-radius limitations.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned