Svg-fallback

December 07, 2014

SVG клевый, но нам нужно подсовывать fallback-image, если по какой то причине браузер не догадывается о таком формате. Использование для этих целей modernizr выглядит, как стрельба по голубям из гаубицы.

.icon {
  display: inline-block; /* или block */
  width: 32px;
  height: 32px;
}
.no-svg { color: red; }
.no-svg .icon {
  background: url('icon.png') no-repeat 0 0;
}
<!doctype html>
<head> 
  <meta charset="utf-8">
  <title>title</title>
</head>
<body>
  <h1>SVG TEST</h1>

  <script>
      if (!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")) {
        document.getElementsByTagName('body')[0].className += 'no-svg';
      }
  </script>
</body>

Единственный минус требуется поддержка javascript, но думаю мы это переживем. Demo

И вот так будет выглядеть демо на старом андроиде