If you have ever tried to use an SVG path for a CSS clip-path you would have likely ran into the issue where the SVG path doesn’t correctly scale and fill the DOM element to clip it.

Turns out it’s pretty simple to solve and has to do with absolute vs relative paths in the SVG. When you get an SVG path out of your design tool it will likely be in absolute units. You can use the following tool to convert your path from absolute to relative:

https://yoksel.github.io/relative-clip-path/

Then you can add the clipPath in an SVG def to the page and reference it in your CSS. Make sure the clipPathUnits are set to objectBoundingBox.

SVG

<svg width="0" height="0">
  <defs>
    <clipPath
      id="my-svg-path-shape"
      clipPathUnits="objectBoundingBox"
    >
      <path d="M0,0.076 C0,0.034,0.022,0,0.048,0 H0.952 C0.978,0,1,0.034,1,0.076 V0.787 C1,0.826,0.981,0.859,0.957,0.863 L0.053,1 C0.024,1,0,0.969,0,0.924 V0.076" />
    </clipPath>
  </defs>
</svg>

CSS

.my-element {
   clipPath: url(#my-svg-path-shape);
}