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

#html #css #css3 #svg #svg_спрайт

Более развернуто, что я хочу получить в результате:     


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

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


На картинке ниже макет того, что я хочу получить в результате 


    

Ответы

Ответ 1

Как выбирать и дорабатывать изображения SVG  

Иконки нарисованные в векторных редакторах: Inkscape, Adobe Illustrator и других,
как правило требуют оптимизации для уменьшения веса и получения более понятного кода
для последующей ручной доработки. 

Мне нравится svg-editor от Peter Collingridge, который очень прост для освоения и
работает очень эффективно, снижая вес файла иконки в несколько раз.

Для спрайта лучше всего подбирать иконки с одинаковыми параметрами: одноцветные,
с линиями выполненными с помощью только   или только .
 и  необходимо преобразовывать в .
Также необходимо, чтобы у  выбранных иконок были одинаковые  viewBox
Например: viewBox="0 0 126 126"
Пример иконки, которая будет использована в спрайте, смотри ниже  






  

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


Чаще пользуются вторым способом.
Пример структуры спрайта. 

 
  


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

    

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

Добавление файла спрайта в HTML 

Есть несколько способов добавления файлов SVG в HTML, но самым надежным является
добавление посредством тега