How to do Image clipping by using SVG shapes?

css svg clipping clip-path image-clipping
John smith FN picture John smith FN · May 13, 2019 · Viewed 7.1k times · Source

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.

Answer

enxaneta picture enxaneta · May 13, 2019

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>

Related questions

How to change the color of an svg element?

I want to use this technique http://css-tricks.com/svg-fallbacks/ and change the svg color but so far I haven't been able to do so. I put this in the css but my image is always black, no matter what. …

Read More
How to change color of SVG image using CSS (jQuery SVG image replacement)?

This is a self Q&A of a handy piece of code I came up with. Currently, there isn't an easy way to embed an SVG image and then have access to the SVG elements via CSS. There are …

Read More
img src SVG changing the styles with CSS

html <img src="logo.svg" alt="Logo" class="logo-img"> css .logo-img path { fill: #000; } The above svg loads and is natively fill: #fff but when I use the above css to try change it to black it doesn't change, …

Read More