title: Using SVG as CSS3 background-image with scaling
body: <p>When I use SVG in background property like this:</p>
  
  <pre><code>.svg-button {
      -webkit-transform: scale(3.0) // root of the problem!
      background: url(Button.svg) no-repeat;
      width: 32px;
      height: 32px;
  }
  </code></pre>
  
  <p>I get blurred image as result. At the same time text in tag with this style is clear. Also if I scale page by using CTRL++ (browser zoom) instead transform property everything is clear.</p>
  
  <p>If I replace CSS background property on:</p>
  
  <pre><code>&lt;object type="image/svg+xml" data="Button.svg" width="32" height="32"&gt;&lt;/object&gt;
  </code></pre>
  
  <p>the image is clear in any scale in any case.</p>
  
  <p>Where is the problem?</p>
  
  <p><strong>Sample on <a href="http://jsfiddle.net/Re6Cf/" rel="nofollow noreferrer">jsfiddle</a></strong></p>
  
  <p><strong>Update:</strong>
  I found some more information about this problem:</p>
  
  <ol>
  <li><a href="https://stackoverflow.com/questions/9562330/svg-pixelation-in-chrome">StackOverflow question</a></li>
  <li><a href="http://code.google.com/p/chromium/issues/detail?id=119471" rel="nofollow noreferrer">Bug ticket for Chrome</a> (I tried my test under Safari/Chrome/IE9/10 and behaviour is the same.</li>
  </ol>