Відповіді:
Я б сказав, що PNG просто за те, що він здається більш прийнятим форматом, ніж SVG.
Той факт, що ви назвали SVG як варіант, означає, що ми можемо виключити графіку фотографій як призначений варіант використання - тому що SVG хороші лише для лінійної графіки, таких як логотипи, піктограми та ілюстрації, подібні до зображень.
Якщо ви розглядаєте цей вибір для фото графіки, вибору немає; PNG, мабуть, завжди буде кращим. Для графіки, де SVG є життєздатним варіантом, SVG є найкращим варіантом із запасом PNG / JPEG. PNG має багато сильних сторін, але щодо масштабованості та розміру файлу він часто не відповідає SVG.
Зважуючи їх один проти одного, PNG, безумовно, буде підтримуватися більшою кількістю браузерів, ніж SVG, на даний момент часу, але дозвіл щойно випущених пристроїв назавжди збільшується, тобто PNG потрібно буде подавати на основі широкого спектру різних дозволів (за допомогою медіа-запитів, JavaScript або 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.
EDIT : Як зазначає ClemDesm, більш старі версії IE не підтримують повністю прозорий PNG, оскільки підтримується IE8. Непрозорі PNG працюють чудово. Відповідь Computerish має чудове рішення для обробки векторних зображень на даний момент: Зберігайте їх як SVG, але експортуйте їх для Інтернету як PNG. Я повністю згоден з цим рішенням.
Однозначно використовуйте PNG для веб-сайту. SVG просто недостатньо широко підтримується, і він має невеликі (якщо такі є) значні переваги над PNG для урізаного експорту. З цього приводу зберігайте всі свої робочі копії у SVG.
Я б дотримувався PNG, щоб бути на безпечній стороні. SVG все ще не повністю прийнято багатьма великими інтернет-компаніями та браузерами. Хоча SVG є масштабованими та є векторами, вони часто непотрібні, займають більше місця та ускладнюють веб-сайт.
Я сподіваюся, що відповів на ваше запитання :)
Навіть незважаючи на те, що SVG не є загальновизнаним, а у деяких людей невдалий час масштабування PNG, я завжди виявляв, що створення піктограми в Adobe Illustrator найкраще працює при збільшенні або зменшенні "розумної" кількості.