title: SVG Stroke Not Appearing When Converting to Icon Font
body: <h2>Goal</h2>
  <p>I am trying to create an SVG icon to add to an icon font file.</p>
  <p><a href="https://web.archive.org/web/20150613185149/http://codepen.io/Kelderic/pen/ogBoap.svg" rel="nofollow noreferrer"><img src="https://web.archive.org/web/20150613185149/http://codepen.io/Kelderic/pen/ogBoap.svg" alt="" /></a></p>
  <h2>Progress</h2>
  <p>I have created an SVG icon, which appears perfectly inline and as an <code>img</code></p>
  <h2>Problem</h2>
  <p>When I upload it to add to my icon font, using both Icomoon and Fontastic, all fills appear, but all strokes are missing. I've run the code through the W3C validator and gotten no issues, and I'm wondering if icon fonts have more rules that plain SVG does have?</p>
  <p><img src="https://i.stack.imgur.com/BNiKN.png" alt="enter image description here" /></p>
  <h2>Code</h2>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg version="1.1" width="51" height="51" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"&gt;
    &lt;polygon points="0,5.5 31,0 31,50 0,44" /&gt;
    &lt;ellipse cx="15" cy="25" rx="7.5" ry="11" fill="transparent" stroke="white" stroke-width="5" /&gt;
    &lt;path d="M31 10.5 L48.5 10.5 L49 11 L50 12.5 L35 23 L31 20" stroke-width="2" fill="white" stroke="black" /&gt;
    &lt;path d="M52 12 L35 23 L31 20 L31 24 L35 27 L50 16.5" fill="black" /&gt;
    &lt;path d="M31 24 L35 27 L50 16.5 L50 35 L49.5 37 L47.5 37.5 L31 37.5" stroke-width="2" fill="white" stroke="black" /&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>