Image clipped by svg is cropped

Question

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 class="svg_01" 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 class="fil0" 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>

Try to remove all default padding and margin with `*{margin: 0;padding: 0;}` — Félix Ch, Jan 24 '23 at 17:07
@FélixCh - that's done, of course. Even if not - it's not 50 px, surely — provance, Jan 24 '23 at 17:15
Can you check in CorelDraw the scale of your document? In inkscape, in document properties, there is a value for "scale". Each time I'm using clip, I first make sure that scale is 1, otherwise always troubles. Changing the scale modify entirely the values. — pier farrugia, Jan 24 '23 at 18:03
@pierfarrugia - when I open the resulting svg by notepad++ - it says - `1920 x 540` — provance, Jan 24 '23 at 18:48
`clip-path`s are not responsive out of the box - unless you apply some tricks: See [Paul LeBeau's solution: "Complex SVG clip-path responsive"](https://stackoverflow.com/questions/48055893/complex-svg-clip-path-responsive#48075809). You might also use `` instead as a workaround. [Explained here: "Problem with CSS SVG Clip path - not working"](https://stackoverflow.com/questions/71286372/problem-with-css-svg-clip-path-not-working/71299443#71299443) — herrstrietzel, Jan 24 '23 at 19:32
@provance, you won't see the scale if looking at svg in notepad. Scale of document will define all the point values like : d="M 29.999999,262.54291 142.54434,153.14747 30.000409,43.754069 Z" (this is a clippath). Except if you are able to read that!:) Example: if you have a document of 300x300px (viewbox 0 0 300 300), scale 1, document origin 0 0, you can now make your clip path. It'll be relative to this document and viewbox. After you can put your svg with style 100% 100% or other values. — pier farrugia, Jan 25 '23 at 08:51

score 1 · Answer 1 · answered Jan 26 '23 at 04:14

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 class="fil0" 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,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Crect x='0' y='0' width='100%' height='100%' fill='%23ccc' stroke='%23999' stroke-width='12' /%3E%3Ctext x='50%' y='50%' font-family='sans-serif' font-size='24' fill='%23999' dominant-baseline='middle' text-anchor='middle'%3E 240 %C3%97 240 %3C/text%3E%3C/svg%3E">

  <img class='bannt --clipped' src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='540'%3E%3Crect x='0' y='0' width='100%' height='100%' fill='%23ccc' stroke='%23999' stroke-width='27' /%3E%3Ctext x='50%' y='50%' font-family='sans-serif' font-size='54' fill='%23999' dominant-baseline='middle' text-anchor='middle'%3E 1920 %C3%97 540 %3C/text%3E%3C/svg%3E">

</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 class="resize">
  <svg class="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,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='540'%3E%3Crect x='0' y='0' width='100%' height='100%' fill='%23ccc' stroke='%23999' stroke-width='27' /%3E%3Ctext x='50%' y='50%' font-family='sans-serif' font-size='54' fill='%23999' dominant-baseline='middle' text-anchor='middle'%3E 1920 %C3%97 540 %3C/text%3E%3C/svg%3E" alt='img'>
</div>

Clip path helper

Yoksel's clip-path generator

score 0 · Answer 2 · answered Jan 25 '23 at 20:46

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>

Image clipped by svg is cropped

2 Answers2

Further reading: About clip-path caveats and pitfalls

Clip path helper