<p>Oh, yes. You are right with the multiple backgrounds. Thanks for pointing that out.</p>

<p>The linked blog states:</p>

<blockquote>
<p>Note I’m using the shorthand ‘background’ CSS property rather than ‘background-image’ as older IE’s seem to try to read multiple images as one long image when you use the more specific notation. </p>
</blockquote>

<p>I think with this logic we have no standard conform possibility to prevent old browsers from seeing the svg.<br>
Except the hackish way:<br>
<code>@media (-webkit-min-device-pixel-ratio: 1), (min-resolution: 10dpi){</code><br>
If a browser is new enough to recognize these new media querys they will render svg background without an error. But again Safari v4 knows min-device-pixel but is buggy with background-position. </p>

<p>I would have no problem in dropping the twenty safari v4 user for a cosmetic thing. But this sprite contains the main interaction stuff. <br>
So IMO we have to reserve the SVG to the HiDPI devices.</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-139908546">view it on GitHub</a>.<img alt="" height="1" src="https://github.com/notifications/beacon/ABWnLfK366iMZt5iQHJEtKnMBfT0dpw_ks5oxcAygaJpZM4F8URO.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-139908546"></link>
  <meta itemprop="name" content="View Pull Request"></meta>
</div>
<meta itemprop="description" content="View this Pull Request on GitHub"></meta>
</div>