<p>Or we could use <a href="http://www.sitepoint.com/a-farewell-to-css3-gradients/">this logic</a> without <code>@media</code> query:</p>

<pre><code>.icon {
    background:url("sprite.svg"), url("sprite.png") ;
 }
</code></pre>

<p>Note: background instead of background-image is intentional.</p>

<p>But old safaris will probably not working: <a href="http://caniuse.com/#feat=svg-css">http://caniuse.com/#feat=svg-css</a> thats why i used the <code>@media</code> way to hide the new stuff.</p>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br>Reply to this email directly or <a href="https://github.com/openstreetmap/openstreetmap-website/pull/1055#issuecomment-139863438">view it on GitHub</a>.<img alt="" height="1" src="https://github.com/notifications/beacon/ABWnLXTmWWcPvEUl_WLVn-8b692TKDxRks5oxVpZgaJpZM4F8URO.gif" width="1" /></p>
<div itemscope itemtype="http://schema.org/EmailMessage">
<div itemprop="action" itemscope itemtype="http://schema.org/ViewAction">
  <link itemprop="url" href="https://github.com/openstreetmap/openstreetmap-website/pull/1055#issuecomment-139863438"></link>
  <meta itemprop="name" content="View Pull Request"></meta>
</div>
<meta itemprop="description" content="View this Pull Request on GitHub"></meta>
</div>