title: Responsive clip-path with inline SVG
body: <p>On an element with a background (image or solid color don't really matter):</p>
  
  <pre><code>&lt;header id="block-header"&gt;&lt;/header&gt;
  </code></pre>
  
  <p>I am trying to apply a clip-path using SVG. To achieve this, I am putting SVG inline into the same element like this:</p>
  
  <pre><code>&lt;header id="block-header"&gt;
      …
      &lt;svg width="100%" height="100%" viewBox="0 0 4000 1696" preserveAspectRatio="none"&gt;
          &lt;defs&gt;
            &lt;clipPath id="myClip"&gt;
              &lt;path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z"/&gt;
            &lt;/clipPath&gt;
          &lt;/defs&gt;
      &lt;/svg&gt;
      …
  &lt;/header&gt;
  </code></pre>
  
  <p>You can run the code snippet below or check the <a href="http://jsfiddle.net/spliter/du7vtyc9/1/" rel="noreferrer">JSFiddle</a>. You can see original SVG image (in black) put inline, having curviness along the bottom and being responsive. In contrast, the red rectangle shows the same image applied (or, rather, not applied) as a <code>clip-path</code>.</p>
  
  <p>I guess I misunderstand either <code>viewBox</code> or <code>preserveAspectRatio</code> attributes though can not find what is exactly wrong here. Any help would be appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#block-header {
      background: Red;
      min-height: 100px;
      -webkit-clip-path: url(#myClip);
   clip-path: url(#myClip);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;SVG image&lt;/h1&gt;
  &lt;svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0 0 4000 1696" preserveAspectRatio="none"&gt;&lt;path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z"/&gt;&lt;/svg&gt;
  
  &lt;h1&gt;&lt;code&gt;clip-path&lt;/code&gt; using the same SVG&lt;/h1&gt;
  &lt;header id="block-header"&gt;
      &lt;svg width="100%" height="100" viewBox="0 0 4000 1696" preserveAspectRatio="none"&gt;
          &lt;defs&gt;
            &lt;clipPath id="myClip"&gt;
              &lt;path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z"/&gt;
            &lt;/clipPath&gt;
          &lt;/defs&gt;
      &lt;/svg&gt;
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>