SVG-штабеля

Картинки со спрайтами безудержно используются для скачивания массы значков и элементов интерфейса всех сразу, единственным HTTP-запросом. Однако они несколько обременительны в употреблении, так как приходится рассчитывать сдвиги и задавать их в background-position. Не получится добавить, убрать или переставить спрайты без такого пересчитывания. Или изменить размер спрайта без того, чтобы наткнуться на его соседа сбоку.

Как можно устранить эту проблему? Ну, положить всех их друг на друга, отключить их видимость, затем показать тот только спрайт, который нужен. Хотел бы я, чтобы это было возможно… и давно хотел… а затем случилось вот что (читайте снизу вверх):

Ах, хорошо! И ужé работает в Файерфоксе. Такая же возможность запланирована к добавлению в Оперу: баг «CORE-37596» (я не мог найти общедоступной гиперссылки, к нему ведущей). Есть и альтернативы SVG-штабелям, лучше поддерживаемые браузерами: элементы embed, iframe, object или img — но я всё же предпочитаю фоновые картинки из-за того, что проще изменять их размеры и положение. Так что давайте надеяться, что поддержку SVG-штабелей добавят и другие браузеры.

Итак, как же работает SVG-штабель? На самом деле, весьма несложно. Поглядите в исходный код SVG-файла Эрика.

Сперва мы задаём каждому из наших значков в SVG-файле уникальный ID, но один и тот же class, затем добавляем код CSS, прячущий все значки, но показывающий тот из них, который оказывается выбран последством :target. И теперь мы можем использовать якорную часть в URL для передачи ID в SVG-файл, наподобие «background: url(icon.svg#ID)».

Большое спасибо @erikdahlstrom за разработку этого технического приёма.

Автор: Mithgol