Рецепты лечения не сложные, но в каждом конкретном случае по одному и тому же вопросу действия будут разные. Всё зависит от многих факторов, например для изменения масштабирования нужно ответить себе на вопросы:
Размеры ‘viewport’ и ‘viewBox’ в шапке файла заданы, они равны или отличаются друг от друга?
Картинка вызывается из внешнего файла или размещена inline в Html?
Есть ли у ‘Symbol’ свой ‘viewBox’?
Есть ли дополнительный ‘SVG’ опять же со своим ‘viewBox’?
В итоге получается, что векторное изображение может масштабироваться от одного до нескольких раз, до того момента, как мы увидим его на дисплее.

Начнем с простого.

Масштабирование изображения в одиночном файле SVG

Берем файл иконки 48х48 px, всё как есть, без изменений кода.

Произошло это из-за отсутствия в шапке SVG файла указания размеров viewPort. Если размеры width, height viewport’а не указаны, то они по умолчанию равны – 100%, поэтому изображение автоматически растянулось на весь экран.

Известно, что масштаб векторной картинки зависит от соотношения величин viewport / viewBox. Подробнее здесь.
1. Если соотношение сторон viewport / viewBox 1:1 – масштаб векторной картинки будет – М1:1, размеры в нашем случае 48х48 px, см. код ниже.
2. Если пропорция viewport / viewBox – 2:1 – масштаб М2:1, то есть происходит увеличение изображения в 2 раза – 96х96 px.
3. Если пропорция viewport / viewBox – 1:2 – масштаб М1:2, то есть происходит уменьшение изображения в 2 раза – 24х24 px.
Чтобы получить эти варианты масштабирования, корректируем каждый раз строку, добавляя, изменяя значения: width=”48″ height=”48″(viewport)

Верхняя картинка – масштаб 1:1, средняя М2:1, нижняя М1:2;

Масштабирование изображения при наличии ‘symbol’

В этом случае векторная картинка проходит масштабирование несколько раз, так как ‘symbol’ имеет собственный ‘viewBox’.
Возьмем теперь иконку, которая имеет размеры 100х100px и ‘symbol’ с viewBox=”0 0 100 100″

Для того, чтобы увидеть, как влияет ‘symbol’ на масштаб картинки я убрал все другие факторы масштабирования:
задал в шапке файла соотношение viewport/viewBox – 1:1.
В команде вывода картинки на экран <use xlink:href=”#…..”/> не указал параметры width и height , которые тоже могли бы влиять на масштаб картинки. Итак, при этих заданных условиях, на масштаб теперь могут влиять только изменения параметров ‘viewBox’ – ‘символа’.
Иконка выше отрисовалась без изменений, в масштабе 1:1 к оригинальному размеру. Так как ‘viewBox’ – ‘символа’ тот же, что и в шапке файла.

Далее, допустим, у нас появилась необходимость уменьшить иконку в два раза. Все условия прежние, меняем только параметры – ‘viewBox’ – ‘символа’, увеличивая их в 2 раза.

С чем тут сравнивается ‘viewBox’ – ‘символа’ для вычисления масштаба? Ответ – с ‘viewport’, который задан в шапке SVG файла – viewport(SVG) / viewBox(symbol’s) – 100/200 = M1:2. Размер иконки стал – 50х50 px.
Обратите внимание на красную рамку вокруг иконки – это ‘viewport’, который задан в начале SVG файла – width=”100″ height=”100″. Это очень удобно – видеть границы ‘viewport’ во время настройки масштаба.

Размеры изображения после масштабирования могут стать больше, чем размеры ‘viewport’ поэтому они будут обрезаны по ширине и/или высоте ‘viewport’а. Смотри пример ниже.

‘viewport'(SVG) / ‘viewBox'(symbol’s) – 100/50 = M2:1.
Размер иконки стал – 200х200 px и поэтому в область просмотра ‘viewport’ – 100х100 px поместилась только верхняя четверть иконки.

Масштабирование изображения при использовании ‘use’

Для чистоты эксперимента отключаем все возможности масштабирования иконки, которые рассмотрели выше.
Оставляем масштабирование в команде ‘use’ с помощью параметров width и height. В отличии от ‘viewBox’, где уменьшение сторон влекло за собой увеличение масштаба, у команды ‘use’ прямо пропорциональная зависимость – увеличение width и height вызывает увеличение размеров вектоной картинки.

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