csssvgclippingclip-pathimage-clipping

How to do Image clipping by using SVG shapes?

Anyone could guide me with how to do CSS Image Clip path with SVG unique shapes? Some people were suggesting to a third-party plugin like SVG Injector and all. Anyone could help me how to achieve this task that will work in all the browsers?

I have given one example image to make it better understanding. Kindly check the below image.

enter image description here

http://ktdev.khaleejtimes.ae/shape.jpg

Thanks & Appreciated.

Solution

  • First you need to draw a path with the desired shape. Next you use the shape to clip the image using <clipPath>

    svg{border:1px solid}
    <svg viewBox="0 0 643 525">
  
  <defs>
    <clipPath id="shape">
      <path fill="none" d="M109,120c0,0,163,46,220,9s34-97,34-97s39.138-16.341,70-11c26.406,4.57,66.618,73.939,105,138
	c37.199,62.089,73,119,73,119s10.398,18.504,0,44c-8.608,21.105-22.685,41.421-88.85,85.03C468.32,442.51,411,474,411,474
	s-85,45-192,9l-5,1c0,0-34.254,15.226-60.675,10.088c-36-7-48.249-32.676-48.249-32.676S172,402,160,327S60,220,60,220
	s-8.444-34,0-52C77.666,130.345,109,120,109,120z"/>
    </clipPath>
    
  </defs>
<image width="643" height="643" clip-path="url(#shape)"  xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" >
</image>

</svg>