Question

When I use SVG in background property like this:

.svg-button {
    -webkit-transform: scale(3.0) // root of the problem!
    background: url(Button.svg) no-repeat;
    width: 32px;
    height: 32px;
}

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.

If I replace CSS background property on:

<object type="image/svg+xml" data="Button.svg" width="32" height="32"></object>

the image is clear in any scale in any case.

Where is the problem?

Sample on jsfiddle

Update:
I found some more information about this problem:

1. StackOverflow question
2. Bug ticket for Chrome (I tried my test under Safari/Chrome/IE9/10 and behaviour is the same.

Answer 1

For Chrome/Safari IE9/10 I have decided to use CSS zoom property instead scale property.

.svg-button {
    zoom: 300%;
    background: url(Button.svg) no-repeat;
    width: 32px;
    height: 32px;
}

For Firefox I still use CSS scale property because Firefox doesn’t support zoom property. At the same time Firefox scales SVG background well. See result.

For IE9 I have written javascript which temporary modifies CSS width property and after small delay returns it back. In this way I force redraw CSS background.