Ответы:
Я бы сказал, что PNG просто потому, что он кажется более приемлемым форматом, чем SVG.
Тот факт, что вы назвали SVG в качестве опции, означает, что мы можем исключить фотографию в качестве предполагаемого варианта использования - потому что SVG полезны только для линейной графики, такой как логотипы, значки и иллюстрации, похожие на картинки.
Если вы рассматриваете этот выбор для фото графики, выбора нет; PNG, вероятно, всегда будет лучше. Для графики, где SVG является жизнеспособным вариантом, SVG - лучший вариант с резервным вариантом PNG / JPEG. PNG имеет много преимуществ, но по масштабируемости и размеру файла он часто не будет соответствовать SVG.
Взвешивая их друг против друга, PNG, безусловно, будет поддерживаться большим количеством браузеров, чем SVG, на данный момент, но разрешения вновь выпущенных устройств постоянно растут, а это значит, что PNG придется обслуживать на основе большого разнообразия разрешений. (через Media Queries, JavaScript или User Agent Sniffing) или масштабируется браузерами, что может привести к некоторым несовершенным результатам.
Глядя на то, что мы знаем, будущее держит; всегда более высокие разрешения, более широкая поддержка и более широкое использование SVG в Интернете; имеет смысл строить для того, что будет.
В общем, веб-сайты должны быть построены так, чтобы работать в течение многих лет; через 5 лет ваш прекрасно обратно совместимый веб-сайт может выглядеть потрясающе для 2% интернет-пользователей, все еще использующих старые браузеры, но довольно скудных в современных браузерах с сумасшедшими разрешениями - так что это очень большой набор трудных решений о том, какой путь компромисс.
Только PNG
Ради качества вам нужно будет обслуживать как минимум пять разных версий в зависимости от размеров экрана и разрешения - и это очень консервативное предположение, вы можете получить 10-15 версий одного и того же изображения, если хотите быть предельно тщательным , Это также занимает некоторое время для реализации.
Если вы решили обслуживать один графический объект и масштабировать его в браузере, результаты, вероятно, будут менее чем идеальными и даже могут быть некрасивыми в зависимости от степени масштабирования.
Большое количество медиа-запросов может излишне раздуть CSS и негативно повлиять на скорость загрузки страниц.
Отлично будет смотреться на старых браузерах и устройствах, но не так здорово на новых.
SVG с одним резервным PNG / JPEG / GIF
Вы можете использовать SVG везде, а затем использовать его в другом формате для браузеров, которые не поддерживают SVG. Главное преимущество - вам нужен только один файл для всех разных разрешений.
Если вы пойдете на компромисс и согласитесь с тем, что пользователи устаревших браузеров могут жить с несовершенно масштабированной графикой, вам потребуется только одна другая версия каждого файла в формате PNG, JPEG или GIF.
Это займет примерно столько же времени, что и в случае с медиа-запросами только в формате PNG - возможно, даже меньше, а это, вероятно, будет примерно такой же ценой.
Будет отлично смотреться на всех новых устройствах, с жертвами, сделанными на старых технологиях.
SVG с несколькими запасными вариантами PNG / JPEG / GIF в зависимости от разрешения и размера экрана
Сначала вы могли бы обслуживать SVG, а затем зависящие от разрешения PNG для браузеров, которые не поддерживают SVG. Это будет наиболее тщательный, наиболее совместимый в обратном и прямом направлениях, наиболее последовательный и самый дорогой по времени вариант.
Это, вероятно, займет столько же времени, сколько 1 и 2 вместе, плюс немного больше для проработки изломов.
Будет выглядеть потрясающе практически на каждом устройстве.
<picture>элементе, помогающем с различными размерами изображения
SVG является масштабируемым, если у вас есть векторная графика, которая является явным преимуществом. Для пиксельной графики PNG лучше. Недостатком является то, что Internet Explorer поддерживает SVG только в следующей версии 9 (ранее с плагином). Мобильные браузеры также могут иметь ограниченную поддержку SVG.
РЕДАКТИРОВАТЬ : Как отмечает ClemDesm, старые версии IE не поддерживают полностью прозрачный PNG, так как поддерживается IE8. Непрозрачные PNG работают нормально. Ответ Computerish предлагает отличное решение для обработки векторных изображений: сохраняйте их в формате SVG, но экспортируйте их для веб-сайтов в формате PNG. Я полностью согласен с этим решением.
Определенно используйте PNG для веб-сайта. SVG просто недостаточно широко поддерживается, и у него мало (если есть) значительных преимуществ по сравнению с PNG для упрощенного экспорта. Тем не менее, храните все свои рабочие копии в SVG.
Я бы придерживался PNG, чтобы быть в безопасности. SVG до сих пор не полностью принят многими крупными интернет-компаниями и браузерами. Хотя SVG являются масштабируемыми и представляют собой векторы, они часто не нужны, занимают больше места и усложняют работу сайта.
Я надеюсь, что ответил на ваш вопрос :)
Несмотря на то, что SVG не принят во всем мире, и у некоторых людей есть разочаровывающее масштабирование времени в формате PNG, я всегда обнаруживал, что создание значка в Adobe Illustrator лучше всего работает при увеличении или уменьшении «разумного» количества.