SVG в контексте данной статьи — это масштабируемая векторная графика, которая может встраиваться в сайты и корректно отображаться в браузере.
Что значит «корректно»?
— Это когда вы увеличиваете страницу и графика не размывается.
Чтобы пояснить это, вот вам картинка, которая сохранена в формате PNG (растровый) и SVG (векторный) + слово «купить». Теперь увеличьте окно в браузере Ctrl и + в Windows или же нажмите Command и + в macOS:
купить — png-иконка (растровая графика)
купить — svg-иконка (векторная графика)
Видите, как первая иконка становится размытой? Понимаете, в чем смысл, если пользователь со слабым зрением пользуется браузером с увеличением?
А еще есть компьютеры с Retina-экранами, на них такие иконки тоже будут размытыми.
Если не хотите размытых иконок, логотипов и прочего — используйте SVG-графику.