Question

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

从表现角度来看，我会很感激。我知道CSS背景图片会被缓存，所以这是一个优点。 SVG为我提供了更大的灵活性，如果我想以不同的方式对某些特定徽标进行着色或调整大小，但如果它在加载时间方面花费了我相当多的费用，我宁愿选择背景图片。

Answer 1

我为我工作的公司做了类似的事情。它们有数百个图像可以轻松压缩成一个SVG精灵。我想答案取决于项目，它会变大吗？如果是的话我认为现在花时间实施精灵表是一个好主意，你也可以用它来制作图标。 here是关于CSS技巧的精彩文章。

如果您将开始这样做，我建议使用Grunt并实施grunt-svgstore，这样可以节省大量时间为您创建精灵表，并且实现起来非常简单，就像这样。

sub vcl_backend_response {
   if (!(bereq.url ~ "wp-(login|admin)|cart|my-account|wc-api|resetpass") &&
    !bereq.http.cookie ~ "wordpress_logged_in|woocommerce_items_in_cart|resetpass" &&
    !beresp.status == 302 ) {
       unset beresp.http.set-cookie;
       set beresp.ttl = 1w;
       set beresp.grace = 1d;
   }
}

Answer 2

TL; DR：从编码的角度来看，我会说保持简单，从用户体验/用户界面来看，这取决于你的用例。

我会选择背景图片，除非与徽标的互动是用户旅程的关键要素。

例如，如果在那里显示客户的数量，他们的高调或您的状态，那么图像就可以了。您不会经常更改它，并且没有必要设置这种情况，因此您可以过多地操作徽标。

如果您正在使用徽标进行整体交互，则用户将徽标更改为颜色，然后点击展开并显示更多信息 - 然后SVG路线才有意义并且可能值得付出努力。

保持以用户为中心 - 您是否能够及时获得足够的用户利益？

内联SVG与CSS背景精灵

2 个答案: