Должен ли я отображать SVG в правильном размере или я должен уменьшить их и позволить браузеру изменить их размер?

Когда размер SVG имеет значение

Размеры в SVG довольно произвольны, поскольку это векторный формат, макет выполняется с помощью математики и поэтому не зависит от указанного вами размера.

Однако, если SVG визуализируется на странице, а затем изменяется размер, это может иметь значение на этапе визуализации.

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

Это крайний случай, поэтому он вряд ли повлияет на большинство сайтов, особенно если их критический CSS встроен и т. д.

Единственный другой случай, когда это имеет значение, — это если ваш CSS не может быть применен правильно по какой-либо причине. Но на большинстве сайтов гигантские SVG не будут самыми большими вещами, которые сломаются, если CSS по какой-либо причине выйдет из строя, так что еще раз, очень второстепенный момент.

Подводя итог: не беспокойтесь об этом, в 99,9% случаев это не стоит усилий и будет работать одинаково хорошо.

Оптимизация SVG для повышения производительности.

Оптимизация SVG больше связана с удалением ненужных узлов (поэтому, если вы отображаете SVG размером 10 на 10 пикселей, возможно, стоит удалить некоторые узлы и упростить SVG для экономии байтов и сложности рендеринга за счет Detail.) и оптимизация SVG за счет упрощения сложных путей и устранения раздувания.

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

Последняя мысль

У меня есть сайт, который очень сильно загружен SVG, кроме сложности DOM, его размер крошечный, всего 80 КБ в сжатом виде (как SVG можно минимизировать и сжать, поскольку это просто текст), я полагаю, что ваше время лучше потратить на оптимизацию в другом месте, если вы уже не набрали 95+ баллов в Page Speed ​​Insights.

Как вы сказали, SVG — это векторы.

я должен пойти на меньший размер файла

Вы не можете уменьшить размер файла SVG. XML-код SVG остается прежним, даже если вы уменьшите заявленный DPI или размер пикселя SVG.

Изменится ли размер файла SVG при изменении viewBox?

Обычно не будет, или, по крайней мере, не сильно. Вот запутанный пример, в котором это БУДЕТ измениться.

Вот оригинальная (маленькая) версия:

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect y="5" x="5" width="2" height="2"></rect>
  <circle cx="5" cy="5" r="20%" fill="white"></circle>
</svg>

Теперь давайте увеличим размер viewBox. Нам нужно пропорционально увеличить абсолютные координаты всех элементов.

<svg viewBox="0 0 10000000 10000000" xmlns="http://www.w3.org/2000/svg">
  <rect y="5000000" x="5000000" width="2000000" height="2000000"></rect>
  <circle cx="5000000" cy="5000000" r="20%" fill="white"></circle>
</svg>

В результате получается то же изображение, но на 48 байт больше (28%!). На 48 байт больше БЕЗ УЧЕБНОЙ ПРИЧИНЫ — представленное изображение точно такое же, с таким же уровнем точности.

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

Если вы изменяете размер viewBox и масштабируете все значения и действительно видите разницу, то это похоже на запутанный пример выше, ЛИБО вы фактически теряете точность, потому что изменение масштаба уменьшает количество цифр в значениях с плавающей запятой, что снизит качество конечного изображения.