Question

我们目前有一个Sprite图片，其中包含一堆SVG。我们正在考虑实施两种策略，但是正在努力寻找最明智的前端策略。

选项：

将所有具有所有颜色变化的SVG（在单个文件中填充一个Fill属性）加载到一个sprite图片中，在网站上投放该图片，然后使用CSS类获取所需的图片。
将所有SVG（没有填充在单个文件中的填充属性）加载到一个sprite图片（没有颜色变化）中，在网站上提供sprite图片，然后使用CSS类获取所需的SVG，还添加CSS fill，black，white或其他需要的blue属性。

每个选项的示例（1：1）

如果我想要黑色的搜索图标，则可以将CSS类名命名为search--black，但是我想要白色的搜索图标，可以使用search--white
如果我想要黑色的搜索图标，则可以使用search + color--white的CSS类

// Option 1.
    .icons {
      background-image: url('/path/to/sprite/');
    }

    .search--black {
      width: 10px;
      height: 20px;
      background-position: 10% 10%;
    }

    .search--white {
      width: 10px;
      height: 20px;
      background-position: 20% 20%;
    }


    // Option 2.

    .icons {
      background-image: url('/path/to/sprite/');
    }

    .search {
      width: 15px;
      height: 20px;
      background-position: 5% 5%;
    }
    .color--white {
      fill: white;
    }

<!-- option 1 -->
<span class="icons search--black">Insert black search icon </span>
<span class="icons search--white">Insert white search icon </span>

<!-- option 2 -->
<span class="icons search color--white">Insert white search icon </span>

我考虑过的事情：

使用选项1，html中需要较大的sprite图片和较少的CSS类
使用选项2时，精灵图像较小，但CSS较多，因为我们需要其他颜色来着色

什么是网站的最佳性能和最佳选择？

将CSS Fill与SVG或单独的SVG结合使用会更有效吗？

0 个答案: