使用SVG作为带有缩放的CSS3背景图像

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

I was "playing" with this a while back and noticed this for fonts too. Although it seems to be fixed now (for the fonts at least).

As far as I understand the inner workings, the contents of the scaled element are mapped to a texture, which in turn is scaled.

As a workaround, try using a 3d translation and move the element on the z-axis to achieve the size change. This won't yield as much control over the final outcome though.

.svg-button {
    -webkit-transform: perspective(800px) translateZ(-300px);
    background: url(Button.svg) no-repeat;
    width: 32px;
    height: 32px;
}

Answer 2

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.