Как сделать спрайт SVG, чтобы при добавлении его в адаптивную страничку HTML, иконки не выходили за границы своих контейнеров.

Более развернуто, что я хочу получить в результате:
Как выбирать и дорабатывать изображения SVG (иконки в частности) для включения в спрайт. Какая должна быть структура и настройки спрайта, для того чтобы: была возможность при однократном добавлении спрайта использовать его компоненты во многих местах HTML страниц была возможность стилизации иконок из внешней таблицы CSS
Требования к иконкам: Иконки SVG должны быть масштабируемыми, то есть должны уменьшаться, увеличиваться при уменьшении, увеличении окна просмотра гаджета, при этом не выходить за границы своего контейнера. Иконки должны менять цвет при наведении курсора Иконки должны при необходимости выступать в роли ссылки
На картинке ниже макет того, что я хочу получить в результате

Ответ

Как выбирать и дорабатывать изображения SVG
Иконки нарисованные в векторных редакторах: Inkscape, Adobe Illustrator и других, как правило требуют оптимизации для уменьшения веса и получения более понятного кода для последующей ручной доработки.
Мне нравится svg-editor от Peter Collingridge, который очень прост для освоения и работает очень эффективно, снижая вес файла иконки в несколько раз.
Для спрайта лучше всего подбирать иконки с одинаковыми параметрами: одноцветные, с линиями выполненными с помощью только или только и необходимо преобразовывать в Также необходимо, чтобы у выбранных иконок были одинаковые viewBox Например: viewBox="0 0 126 126" Пример иконки, которая будет использована в спрайте, смотри ниже

В шапке SVG файла необходимо убрать - width="126" height="126" - это viewport, который мешает иконке была адаптивной. То есть иконка должна целиком занимать родительский контейнер

Какая должна быть структура и настройки спрайта
Главная задача спрайта - быть хранилищем для иконок, которые до вызова в определенное место HTML странички должны быть невидимыми.
Это реализуется двумя способами:
код каждой иконки помещается внутри группового тега .... и всё вместе размещается в секции ... Код каждой иконки оборачивается тегами ... с присвоением уникального идентификатора, по которому в дальнейшем будет вызов иконки командой
Чаще пользуются вторым способом. Пример структуры спрайта.

Как видим убраны все атрибуты для последующей стилизации иконок из внешнего файла CSS И обратите внимание, что к иконке с id="wordpress" добавлен дополнительный viewBox

Это делается для выравнивания размеров иконки, отличающимися от размеров других иконок. Параметр необязательный, но очень полезный, не только для подгонки размеров, но и центрирования иконки внутри.
Добавление файла спрайта в HTML
Есть несколько способов добавления файлов SVG в HTML, но самым надежным является добавление посредством тега