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?

<!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>

Answers


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 ... -->

Need Your Help

EventMachine change delay in a periodic timer inside the block

ruby timer eventmachine

Call a periodic timer and when an error occurs inside the block change this the periodic timer delay. Can i use periodic timer or the best way is an add_timer ?

roll back remote repo after pushing

git git-push

Ive made a bit of a mess of my repo.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.