SVG-стеки

Стеки — это ещё один способ организации SVG. Как спрайт, только лучше — как если бы мы могли использовать use в CSS.

К сожалению, способ очень неравномерно поддерживается современными браузерами.

Метод был предложен тут: simurai.com/blog/2012/04/02/svg-stacks/ 2 года назад. Ниже, собственно, мой вольный пересказ: объяснение принципа и демо для тестов.

В чем состоит способ?

Допустим, у нас есть SVG-спрайт. Чтобы показать нужный кусочек картинки мы двигаем его с помощью background-position. Чем больше спрайт, тем утомительней задавать для каждой картинки свое положение фона. Конечно, можно автоматизировать процесс, но что если бы можно было просто внутри файла сложить картинки стопкой, скрыть их все и показывать нужную картинку, обратившись к ней по ID?

Например, есть два квадратика, один поверх другого, зеленый сверху:

Примерный код:

<svg width="150" height="150">
  <g id="no">
    <rect fill="crimson" width="150" height="150" rx="8"/>
  </g>
  <g id="yes" class="hidden">
    <rect fill="yellowgreen" width="150" height="150" rx="8"/>
  </g>
</svg>

По умолчанию должен показываться нижний элемент (красный), так что добавим CSS:

.hidden { display: none; }

А теперь воспользуемся селектором :target, чтобы показать только нужный:

:target { display: block; }

Добавим в адрес страницы ID элемента (#yes) Клик! и мы видим зеленый квадратик:

Аналогично можно поиграться запрашивая файл по прямой ссылке: без ID и с ID

Отлично работает!

А что если попробовать разные способы вставки, например embed, img или background-image?

Я сделала демо c разными способами, чтобы это проверить: https://codepen.io/yoksel/full/KDpqu/.

И вот тут обнаруживается интересное:

• вставка через embed и iframe работает во всех браузерах;
• вставка через img и background-image — в IE9+, Firefox и старой Опере (только img), и совсем не работает в вебкитах.

Отсутствие поддержки ID для background-image в вебкитах означает, что стеками пользоваться пока нельзя.

Мне очень нравится идея и изящество SVG-стеков, и я надеюсь, что однажды мы сможем использовать их во всех браузерах без ограничений.