Как масштабировать размеры иконок svg

Вот есть код:

При размерах 256 пикселей размер svg иконки не 256 пикселей, а где-то ~140 При указании 128, тоже не 128 и т.д. Почему так происходит? Я уже перечитал все эти мануалы, в примерах их иконки все нормально отображаются с размерами, а почему эта не работает как надо?!

Ответ

Интересный вопрос!
В вашем примере затронута одна из фундаментальных тем SVG - масштабирование. Поймете, как это работает и в svg будет всё легко и просто.
Масштаб определяется соотношением viewport / viewBox, где viewport это width="X" height="Y"
В вашем примере масштабирование применяется последовательно несколько раз. Очень легко запутаться. Поэтому я максимально упрощу ваш пример и поэтапно буду усложнять до практического применения
Ниже пример, где применяется масштабирование только один раз в шапке svg файла
viewport / viewBox = 100/100=1. Масштаб будет - 1:1 То есть как нарисовано в векторном редакторе, так и будет отражаться на дисплее

На скрине векторного редактора видно, что физически иконка имеет габариты - 56.6 х 56.6px
Теперь запускаем этот же файл в браузере. И для наглядности я добавил красный прямоугольник, через стили в шапке файла, который показывает границы SVG файла.
style="border:1px solid red;"

Границы svg определяет viewport это - width="100" height="100"
Из примеров видно, что иконка 56 х 56px не полностью занимает viewport - 100 х 100px
Это очень плохо, так как эти свободные пространства добавляют отступы от других элементов верстки HTML
Убираем лишние отступы
Для этого уменьшаем viewport до размеров иконки
width="56" height="56" viewBox="0 0 58 58"
Смотрим результаты в векторном редакторе и в браузере:

Пример в браузере

Масштабирование иконок до требуемых размеров
Размер 256 x 256px
Для этого увеличиваем размер viewport до требуемых размеров


Проверяем в браузере

Размер 128 x 128px
проверяем в векторном редакторе

Делаем рабочую версию приложения
Основное правило последовательных масштабирований в одном файле SVG
В шапке файла SVG задается самый большой viewport - это прямоугольная область, которую видит пользователь на экране. Если задали width="256" height="256", то последующие масштабирования, которые идут в коде ниже могут только уменьшать размер этой области.
Пример с 3 иконками 256x256; 128x128; 64x64
.alignlef { display: inline; float: left; margin-right: 1.625em; } path { fill:inherit; stroke:inherit; }