Является ли более эффективным использование CSS Fill с SVG или отдельными SVG? - PullRequest
Новая
       37

Является ли более эффективным использование CSS Fill с SVG или отдельными SVG?

0 голосов
/ 04 октября 2018

В настоящее время у нас есть изображение Sprite, в которое загружено несколько SVG.Есть две стратегии, которые мы думаем реализовать, но изо всех сил пытаемся найти, какая из них была бы более эффективной в отношении внешнего интерфейса.

Параметры:

  1. Загрузить все SVG (с атрибутом Fill, заполненным в отдельных файлах) со всеми цветовыми вариациями в одно изображение спрайта, подать его навеб-сайт, а затем используйте CSS-классы, чтобы получить тот, который нам нужен.
  2. Загрузите все SVG (без атрибута заполнения, заполненного в отдельных файлах) в одно изображение спрайта (без изменений цвета), предоставьте изображение спрайта на веб-сайте,и затем использовать CSS-классы, чтобы получить SVG, который нам нужен, но также добавить CSS fill свойство black, white, blue или другие по мере необходимости.

Примеры для каждой опции (1: 1)

  1. Если бы я хотел черный значок поиска, у меня могло бы быть имя класса CSS search--black, но я хотелбелый значок поиска, который я мог бы сделать search--white
  2. Если бы я хотел значок поиска в черном, я мог бы использовать класс CSS search + color--white

// 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. С опцией 1 в спрайте больше изображения и меньше классов CSS, необходимых в html
  2. с вариантом 2, спрайт меньше, но больше CSS, так как нам нужны дополнительные для цвета

Что является более производительным и оптимальным для веб-сайтов?

...