Всем привет. Это статья из разряда: “решаем простые задачи сложным способом”, или “для тех, кто не ищет легких путей”. Хотел бы уточнить заранее, что это не “самое лучшее решение проблемы”, а всего лишь то, до чего я смог дойти исходя из собственного опыта...

Я много рассказывал о теге <use> в SVG и использовал его для вывода иконок. Прелесть в том, что с помощью <use> можно ссылаться на часть SVG и выводить только её. Это позволяет использовать схему «много изображений за один запрос, потому что это суперэффективно», которую раньше решали с помощью CSS-спрайтов и иконочных шрифтов. Перевод статьи «How SVG Fragment Identifiers Work» от Криса Койера. Но <use> — это инлайновый SVG. Он не поможет, если вы хотите использовать часть SVG в теге <IMG> или в background-image...