Image clipped by svg is cropped-CodePudding

Img bannt has its original dimensions - 1920 x 540
I need to clip it using svg and it works but about 50 px in both dimensions of the image - are missing
Seems like the image is cropped, not resized
I created the svg file using CorelDraw - if matters
any help ?

.wrapt {
  position: relative;
}

.bannt {
  display: block;
  width: 100%;
  margin: 0 auto;
  clip-path: url(#cp1);
}

.svg_01 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

<div class='wrapt'>
  <svg  xml:space="preserve" width="1920px" height="540px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 1770.365 497.915">
      <defs>
        <clipPath id="cp1">
        <path  d="M0 0l1770.365 0 0 497.915c-73.766,0 -147.531,-27.662 -221.296,-27.662 -73.765,0 -147.53,27.662 -221.296,27.662 -73.765,0 -147.53,-27.662 -221.295,-27.662 -73.765,0 -147.53,27.662 -221.296,27.662 -73.765,0 -147.53,-27.662 -221.295,-27.662 -73.54,0 -147.079,27.49 -220.619,27.658 25.494,-29.84 30.119,-61.425 -0.516,-76.499 -69.556,-34.225 -40.441,-137.117 -168.281,-144.344 -127.841,-7.226 -197.109,67.562 -186.722,153.564 2.515,20.822 7.328,38.886 14.915,54.45l-102.664 12.833 0 -497.915z"/>
         </clipPath>
         </defs>
    </svg>
  <img class='bannt' src='bannt/plain_01.jpg' alt='img'>
</div>

CodePudding user response：

The clip path in CSS needs to either fit the image size exactly or be scaled so that it fits.

I will suggest to insert the image into the SVG. When you set the viewBox of the SVG to the size of the clip path, the clip path will fit the inner "coordinate system" of the SVG. If you give the image the same width, it also scales to the size of the SVG.

The "outer size" of the SVG is default 100%. This can be controlled using CSS. It will probably be a good idea to use display block on the SVG.

svg {
  display: block;
}

<svg viewBox="0 0 1770 500">
  <defs>
    <clipPath id="cp1">
      <path d="M0 0l1770.365 0 0 497.915c-73.766,0 -147.531,-27.662 -221.296,-27.662 -73.765,0 -147.53,27.662 -221.296,27.662 -73.765,0 -147.53,-27.662 -221.295,-27.662 -73.765,0 -147.53,27.662 -221.296,27.662 -73.765,0 -147.53,-27.662 -221.295,-27.662 -73.54,0 -147.079,27.49 -220.619,27.658 25.494,-29.84 30.119,-61.425 -0.516,-76.499 -69.556,-34.225 -40.441,-137.117 -168.281,-144.344 -127.841,-7.226 -197.109,67.562 -186.722,153.564 2.515,20.822 7.328,38.886 14.915,54.45l-102.664 12.833 0 -497.915z"/>
    </clipPath>
  </defs>
  <image width="1770" href="https://via.placeholder.com/1920x540" clip-path="url(#cp1)" />
</svg>

CodePudding user response：

As commented: clip-path is not responsive

.wrapt {
  position: relative;
}

.bannt {
  display: block;
  width: 100%;
  height: auto;
  clip-path: url(#cp1);
  border: 1px solid red;
}

.clipped {
  width: 100%;
  -webkit-clip-path: url(#my-clip-path);
  clip-path: url(#my-clip-path);
}

<div class='wrapt'>
  <svg width="0" height="0" viewBox="0 0 1770.365 497.915">
      <defs>
        <clipPath id="cp1">
        <path  d="M0 0h1770.4v497.9c-73.8 0-147.6-27.6-221.3-27.6s-147.6 27.6-221.3 27.6s-147.6-27.6-221.3-27.6s-147.6 27.6-221.3 27.6s-147.5-27.6-221.3-27.6c-73.6 0-147.1 27.4-220.6 27.6c25.5-29.8 30.1-61.4-0.5-76.5c-69.6-34.2-40.5-137.1-168.3-144.3s-197.1 67.5-186.8 153.5c2.6 20.9 7.4 38.9 15 54.5l-102.7 12.8v-497.9z"/>
         </clipPath>
        
    <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
      <path d="M0,0 l1,0,0,1 c-0.042,0,-0.083,-0.056,-0.125,-0.056 c-0.042,0,-0.083,0.056,-0.125,0.056 c-0.042,0,-0.083,-0.056,-0.125,-0.056 c-0.042,0,-0.083,0.056,-0.125,0.056 c-0.042,0,-0.083,-0.056,-0.125,-0.056 c-0.042,0,-0.083,0.055,-0.125,0.056 c0.014,-0.06,0.017,-0.123,0,-0.154 c-0.039,-0.069,-0.023,-0.275,-0.095,-0.29 c-0.072,-0.015,-0.111,0.136,-0.105,0.308 c0.001,0.042,0.004,0.078,0.008,0.109 l-0.058,0.026,0,-1"></path>
    </clipPath>
        
         </defs>
    </svg>
  <img class='bannt' src="data:image/svg xml,">

  <img class='bannt --clipped' src="data:image/svg xml,">

</div>

For a responsive clip-path you need to optimize it

img{
  max-width:100%;
}

.clipped {
  width: 100%;
  -webkit-clip-path: url(#my-clip-path);
  clip-path: url(#my-clip-path);
}

.resize{
  width: 50%;
  height: auto;
  padding:1em;
  overflow:auto;
  border:1px solid green;
  resize:both;
}

<p>Clip path optimized with: https://yoksel.github.io/relative-clip-path/</p>

<p>Resize me</p>
<div >
  <svg  width="0" height="0">
    <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
      <path d="M0,0 l1,0,0,1 c-0.042,0,-0.083,-0.056,-0.125,-0.056 c-0.042,0,-0.083,0.056,-0.125,0.056 c-0.042,0,-0.083,-0.056,-0.125,-0.056 c-0.042,0,-0.083,0.056,-0.125,0.056 c-0.042,0,-0.083,-0.056,-0.125,-0.056 c-0.042,0,-0.083,0.055,-0.125,0.056 c0.014,-0.06,0.017,-0.123,0,-0.154 c-0.039,-0.069,-0.023,-0.275,-0.095,-0.29 c-0.072,-0.015,-0.111,0.136,-0.105,0.308 c0.001,0.042,0.004,0.078,0.008,0.109 l-0.058,0.026,0,-1"></path>
    </clipPath>
  </svg>
  <img class='clipped' src="data:image/svg xml," alt='img'>
</div>

Clip path helper

Yoksel's clip-path generator

Further reading: About clip-path caveats and pitfalls

Clip path helper