Using SVG as CSS3 background-image with scaling

css, html, svg

Solution

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.

Problem

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: - StackOverflow question - Bug ticket for Chrome (I tried my test under Safari/Chrome/IE9/10 and behaviour is the same.

Original source

Related problems