内联SVG vs CSS背景Sprite

-1

我在我的应用程序中创建了几个页面（当前在我的前端运行Angular），每个页面都包含大量徽标。我目前正在为每个SVG标志（将内联SVG代码放在一个模板中）创建指令，这使得代码更具可读性，但由于标志的数量众多，我开始怀疑它是否会更有意义改为创建一个CSS精灵。内联SVG vs CSS背景Sprite

我希望从性能的角度来看待这个问题。我知道CSS背景图像被缓存，所以这是一个优点。如果我想对某些特定徽标进行不同的颜色或大小设置，SVG为我提供了更大的灵活性，但如果在加载时间方面花费我相当多的成本，我宁愿选择背景图片。

来源

2017-01-16 user3658800

-2

TL; DR：从编码的角度来看，我会说保持简单，从用户体验/ UI的角度来看，它取决于您的使用案例。

我会去背景图片，除非与徽标的交互是用户旅程的关键因素。

例如，如果在那里显示客户端的数量，他们的高配置或作为结果的状态，那么图像就没有问题。你不会经常改变它，也没有必要设置这种情况，以便你可以操纵标志太多。

如果您有一个使用徽标的完整交互，用户将徽标更改颜色悬停，然后点击即可展开并显示更多信息 - 那么SVG路线是有意义的，可能是值得的。

让事情以用户为中心 - 是时候给你的成本去获得对用户的好处还不够吗？

来源

2017-01-16 09:18:08 ZaneDickens

我正在为我工作的公司做这样的事情。他们有数百张图片可以很容易地压缩成一个SVG精灵。我想答案取决于该项目，它会变大吗？如果是的话，我认为现在花时间实施精灵表是一个好主意，也可以用它来表示图标。 here是一篇关于CSS技巧的精彩文章。

如果你会开始这样做，我推荐使用Grunt并实现grunt-svgstore它为你节省了大量的时间来创建精灵表，并且它非常简单，就像这样。

grunt.initConfig({ 
    svgstore: { 
    options: { 
     option like prefix ID with 'icon', indentation, etc. 
     } 
    }, 
    default : { 
     files: { 
     'dest/dest.svg': ['svgs/*.svg'], //destination, files to convert 
     }, 
    }, 
    }, 
});

来源

2017-07-05 13:57:40 OmarAguinaga

内联SVG vs CSS背景Sprite

回答

相关问题