SVG image de fond d'écran via CSS, pas à l'affiche dans les navigateurs webkit

Je suis un de développeurs open-source et pur HTML5 et CSS3 avec mon webframework (http://m-m-m.sf.net).
Je tiens à attirer une erreur de validation icône via l'entrée:invalide la règle CSS aligné à droite.
Mais c'est seulement en travaillant dans FF, mais pas dans les navigateurs basés sur webkit comme Chrome ou Safari.
J'ai créé un minimum de standanlone html (sans validation et :non valide) pour les essais de:

<!DOCTYPE HTML>
<html>
  <head>
  <style type="text/css">
  <!--
input {
  border-color: #ff2222;
  background-color: #ff8888;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em'><g><circle cx ='8' cy ='8' r ='8' style='fill:%23ff0000;stroke:none'/><text x='6' y='13' style='font-size:14px;fill:%23ffffff;stroke:none;font-family:Monospaced;font-weight:bold'>!</text></g></svg>");
  background-repeat: no-repeat;
  /* background-size: auto; */
  background-position: 98% 50%;
}
  -->
  </style>
  </head>
  <body>
    <input type="text" placeholder="type here" />
  </body>
</html>

Des idées?

mon SVG n'apparaît pas sur CHROME quand je ne background:url('loader.svg'). Ne peut pas comprendre pourquoi il n'affiche pas quand je vois l'actif a été chargé avec succès

OriginalL'auteur Jörg | 2013-05-06