title: How to scale SVG coordinates in the range 0 and 1?
body: <p>I've been having issues scaling the inline SVG, in order to clip-path it in CSS, in the example to the container of the image that I'm trying to show.</p>
  
  <p>I've seen the other similar questions with solutions but they still don't work as intended:</p>
  
  <pre><code>&lt;style&gt;
    .cutR{
          clip-path: url(#cutR)
      }
  
  .blogMainArticleMedia{
    float:left;
    width:100%
  }
  
  .image{
    float:left;
    display:block;
    width:100%
  }
  &lt;/style&gt;
  &lt;div class="blogMainArticleMedia cutR"&gt;
    &lt;img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg" alt="image" class="image"&gt;
  &lt;/div&gt;
  
  
  &lt;svg width="0" height="0" preserveAspectRatio="none"&gt;
      &lt;defs&gt;
          &lt;clipPath id="cutR" clipPathUnits="objectBoundingBox"&gt;
              &lt;path d="M0,0c1.45,81.4 320,80 320,80l320,0l320,0c0,0 320,0.62 320,80c0,105.84 0,400 0,400c-1.45,81.4 -320,80 -320,80l-640,0c-171.919,0.239 -319.7,-0.491 -320,80l0,-720Z"
              style="fill:none;" /&gt;
          &lt;/clipPath&gt;
      &lt;/defs&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><a href="https://codepen.io/thepra/pen/wNdpXW" rel="nofollow noreferrer">https://codepen.io/thepra/pen/wNdpXW</a></p>
  
  <p>They suggest to scale the coordinates of the path to a range between 0 and 1, but I can't find any software option(Affinity Designer) or online tool to do such thing.</p>
  
  <p>Did anyone solved this scaling issue?</p>
  
  <p>ps: here's the shape of the path
  <a href="https://i.stack.imgur.com/AS4B4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AS4B4.png" alt="enter image description here"></a></p>