title: Converting clip-path: polygon() to Edge-compatible SVG
body: <p>I'm trying to create a CSS illustration that works across browsers, including Edge.</p>
  <p>Using <a href="https://stackoverflow.com/questions/50838485/easiest-way-to-convert-polygon-clip-path-to-microsoft-edge-supported-clippath">this answer</a>, I tried to convert the following (working) CSS polygon clip-path to an Edge-compatible, SVG-driven approach. The 1-to-1 method is rendering <em>something</em>, but it's not the desired result.</p>
  <p>What am I misunderstanding here?</p>
  <p><a href="https://i.stack.imgur.com/SKzCY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SKzCY.jpg" alt="enter image description here" /></a></p>
  <p><strong>Currently working CSS clip-path: polygon()</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.you-headshot {
    position: relative;
    max-width: 500px;
    max-height: 500px;
    background-color: #a3a3a1;
    width: 100%;
    height: 100%;
    border-radius: 400px;
    overflow: hidden;
  }
  
  .you-headshot div {
    position: absolute;
    height: 100%;
    width: 100%;
  }
  
  .you-head-outline {
    background-color: #000;
    clip-path: polygon(48% 6%, 43% 7%, 38% 9%, 34% 12%, 29% 16%, 24% 22%, 22% 30%, 22% 44%, 23% 50%, 23% 65%, 25% 72%, 28% 77%, 32% 82%, 35% 86%, 40% 90%, 43% 92%, 50% 93%, 55% 91%, 62% 87%, 70% 76%, 74% 69%, 75% 64%, 75% 54%, 74% 49%, 74% 40%, 74% 32%, 71% 23%, 66% 15%, 59% 9%, 53% 6%);
  }
  
  .you-neck-outline {
    background-color: #000;
    clip-path: polygon(29% 77%, 28% 88%, 23% 100%, 24% 100%, 76% 100%, 68% 90%, 67% 87%, 65% 71%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="you-headshot"&gt;
    &lt;div class="you-neck-outline"&gt;
    &lt;/div&gt;
    &lt;div class="you-head-outline"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Not working SVG conversion</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  .you-headshot {
      position: relative;
      max-width: 500px;
      max-height: 500px;
      background-color: #a3a3a1;
      width: 100%;
      height: 100%;
      border-radius: 400px;
      overflow: hidden;
    }
  
    .you-headshot div {
      position: absolute;
      height: 100%;
      width: 100%;
    }
  
    .you-head-outline {
      background-color: #000;
      clip-path: url(#you-head-outline)
    }
  
    .you-neck-outline {
      background-color: #000;
      clip-path: url(#you-neck-outline)
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="you-headshot"&gt;
   &lt;div class="you-head-outline"&gt;
   &lt;/div&gt;
   &lt;div class="you-neck-outline"&gt;
   &lt;/div&gt;
  
  &lt;svg width="0" height="0"&gt;
    &lt;clipPath id="you-head-outline" clipPathUnits="objectBoundingBox"&gt;
      &lt;polygon points=".48, .6, .43, .7, .38, .9, .34, .12, .29, .16, .24, .22, .22, .30, .22, .44, .23, .50, .23, .65, .25, .72, .28, .77, .32, .82, .35, .86, .40, .90, .43, .92, .50, .93, .55, .91, .62, .87, .70, .76, .74, .69, .75, .64, .75, .54, .74, .49, .74, .40, .74, .32, .71, .23, .66, .15, .59, .9, .53, .6"/&gt;
    &lt;/clipPath&gt;
    &lt;clipPath id="you-neck-outline" clipPathUnits="objectBoundingBox"&gt;
      &lt;polygon points=".29, .77, .28, .88, .23, .100, .24, .100, .76, .100, .68, .90, .67, .87, .65, .71"/&gt;
    &lt;/clipPath&gt;
  &lt;/svg&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>