Search code examples
cssfirefoxsvgcss-spritesantialiasing

css sprite for scaled background svg in firefox

I wanted to use scaled svg images as icons of different sizes, but found inconsistent behaviors in firefox.

Without css sprite, firefox would anti-alias the scaled images. But with css sprite, firefox would not anti-alias them. Therefore, The icons looked ugly with css sprite.

Please visit this jsfiddle for details. What's the problem with firefox?

https://i.sstatic.net/lQ1oF.png

<!DOCTYPE html>
<html>
<head> 
<style type='text/css'>
.whole {
    width: 80px;
    height: 80px;
    background-image: url("outliner.svg");
    background-size: 100% 100%;
}
i {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-image: url("outliner.svg");
    background-size: 500% 500%;
}
.circle { background-position: -32px 0;}
.disk { background-position: 0 -16px; }
</style>
</head>
<body>
<div>With CSS Sprite:</div>
<i class="circle"></i><i class="disk"></i>
<div>Without CSS Sprite:</div>
<i class="whole"></i>
</body>
</html>
Solution

  • Currently, there is no CSS method to change the rendering mode of SVG elements, though there is an SVG attribute that can do so: shape-rendering.

    I went ahead and ran your SVG file through a base64 encoder (which you can use to decode the data in the following examples), after adding shape-rendering: <value> to each of your <g> elements, where <value> has several options: optimizeSpeed (example), crispEdges (example), and geometricPrecision (example).

    Depending on how you want your final SVG to display, just choose one of the particular values, and your final SVG code will look somewhat like the following (note the shape-rendering attribute on each of the <g> tags):

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="480" height="480" viewBox="0 0 480 480">
<g shape-rendering="crispEdges" stroke="#333" fill="#333">
  <g shape-rendering="crispEdges" id="icon-1-1" transform="translate(0,0)">
    <line x1="10" y1="10" x2="86" y2="86" stroke-width="12"/>
    <line x1="10" y1="86" x2="86" y2="10" stroke-width="12"/>
  </g>
  <g shape-rendering="crispEdges" id="icon-1-2" transform="translate(96,0)">
    <!-- svg continues below ... -->