title: SVG as icon font alternative
body: <p>For my current workflow I use iconic web fonts generated with the Icomoon. It’s a very easy and fun technique with an obvious advantages:</p>
  
  <ul>
  <li>Icon behaves just like any other glyph, so any text CSS transformations can be applied to it in a natural way, like <code>text-shadow</code>, <code>text-decoration</code>, <code>color</code> etc.</li>
  <li>Easy reuse, just add necessary <code>font-family</code> to element.</li>
  </ul>
  
  <p>But it has major flaws do not let me sleep.</p>
  
  <ul>
  <li>Font icons are blurry no matter how perfectly its curves are aligned to a pixel grid. Not to mention awful Windows rendering.</li>
  <li>It’s hard to add new icons to the font, especially when vector source font is made from is not available and even lost.</li>
  <li>It requires bunch of different font versions (woff, eot, ttf) for acceptable cross-browser support.</li>
  <li>In the end fonts are not really for graphics at all (especially not monochrome), it seems to not the right way to use dummy empty and non-semantic <code>&lt;span class="icon"&gt;&lt;/span&gt;</code> for this purpose.</li>
  </ul>
  
  <p>Well, the obvious alternative is SVG, which has no mentioned disadvantages. But has it’s own flaws, which do not let me use it’s easily.</p>
  
  <ul>
  <li>A lot of small files are quite simply not acceptable in our HTTP/1.1 era.</li>
  <li>Creating of icon modification is not an easy task and requires manual editing, which is also rather strange for our just-type-npm-install era.</li>
  </ul>
  
  <p>I've googled for some npm packages which hasn’t satisfied me for some reasons.</p>
  
  <p>So, I’m asking your advice how to manage this trivial and routine task. Is there productive and reliable way to generate SVG sprites with modified variations of original icon and bitmap fallback for old browser?</p>