Зображення SVG краще зменшені, ніж png, jpg або gif високої роздільної здатності?

Я знаю, що якщо ви хочете масштабувати зображення, то SVG - це мудрий вибір.

Однак моя ситуація полягає в тому, що у мене є піктограми, які я хочу, щоб користувачі могли завантажувати їх через CMS. SVG-файли настільки складніші для створення, тому jpg, gif або png здається ідеальним форматом для адміністраторів.

Якщо завантажений той самий або більший розмір дисплея і зберігається у правильному співвідношенні, чи можуть jpgs, gifs або png бути настільки ж якісними, як SVG, коли зменшуються в розмірі?

Моє припущення, що браузери також повинні антиаліазувати SVG нижче певного розміру, тому вони, ймовірно, розмиваються так само, як і будь-який інший формат, хоча gifs, здається, розмивають більше.

(Примітка. Будь ласка, прочитайте власну відповідь ОП перед цим, оскільки моя відповідь - коментар до розслідування ОП)

Це відомий випуск Android Chrome. У деяких своїх конструкціях вони вимкнули функцію згладжування, що спричинило виведення векторних фігур із чіткими краями. Причиною цього було зменшення перевантаження, створюваної обчисленнями згладжування. Через скарги вони опублікували оновлення, яке повинно було б увімкнути антизбудження назад.

Існує кілька ниток у переповненні стека, які обговорюють цю проблему. Ось один із них:
/programming/19875908/vectors-poorly-displayed-on-chrome-for-android-canvas

Я не міг знайти посилання на ту саму проблему на IPod Touch Safari, але, ймовірно, це можна екстраполювати і припустити, що проблема однакова.

Існують способи спробувати змусити антизбудження навіть тоді, коли він вимкнений, наприклад, цей трюк, який в основному додає трохи прокладки навколо елемента, змушуючи браузер чомусь застосувати антизбудження. Ви також можете спробувати встановити атрибут форм-рендерінга елемента на щось інше, ніж чіткі краї та побачити, чи відзначає його браузер.

Я щойно провів тест, і єдина різниця, здається, у мобільних браузерах.

Я створив зображення піктограми Twitter 990 x 900 пікселів (ця піктограма здається занадто детальною конструкцією для гарного масштабування, настільки хороша для цього тесту). Я зберегла це у форматі SVG, JPG, GIF, прозорий GIF (просто форма птаха, без кольору фону, замість цього додавши CSS), PNG, прозорий PNG.

Потім я зменшив їх до 15px, 25px, 50px, 100px та 150px.

Ось результати Firefox:

Ось результати в Chrome:

Якщо ми збільшимо масштаб екрана з найменшими результатами, щоб ми могли бачити, які пікселі створюються, то Firefox (вгорі) трохи затемнює краї в непрозорих версіях, але всі інші результати дуже схожі.

Однак у веб-переглядачі IPod Touch Safari версія SVG виглядає досить розмитою, а інші досить пікселізованими:

Аналогічний результат також спостерігається на Android Chrome. Я не робив знімок екрана цього.

Мені цікаво, чи причиною цього може бути щось пов’язане з щільністю пікселів, що є основною різницею в дисплеї, хоча це мало б більше сенсу для мене, якби всі зображення оброблялися по-різному на мобільному, а не тільки SVG.

Якщо хтось може пояснити, чому це так, то я перенесу галочку прийнятої відповіді. В іншому випадку я думаю, що TL; відповідь DR полягає в тому, що це залежить від того, якщо ви віддаєте перевагу розмитим або піксельним значкам (або робити багато піктограм пікселів ідеальних розмірів для ваших чутливих точок прориву).

редагувати: з тих пір я зауважував, що svgs зазвичай набагато зрозуміліші на яблучних пристроях - пташиний твіттер, можливо, був занадто детальним, щоб це відобразилося в моїх тестах вище, тому я вважаю, що вони є правильним форматом, який можна використовувати для значків.

Існує дуже важлива відмінність між векторними зображеннями та растровими зображеннями. Векторні зображення, якщо ми трохи спростимо, відображаються клієнтом, тоді як растрові зображення ви надаєте ви.

Це означає, що програма, якій ви надсилаєте зображення, має більше інформації про те, як вона поводиться. Кінцевим результатом є те, що у вас є такі недоліки :

• Щоб зробити зображення презентабельним, потрібно більше ресурсів
  • У такому випадку рендерінг може вирішити падіння якості, оскільки у нього недостатньо ресурсів, щоб зробити це краще.
• Кожна система зображень має свій набір химерностей та недоліків
  • Робить складніше бути послідовним
  • Ви отримуєте проблеми програміста

З іншого боку, є деякі переваги цього:

• Зображення можна вільно масштабувати та мати більш маніпулятивні варіанти.
  • Це просто результат роботи, виконаної у клієнтах, щоб вони могли витратити більше часу на обчислення пікселів, щоб отримати більше зображення, якщо ви надсилаєте елементи, які він знає, як масштабувати.
• Дані в багатьох випадках менше, ніж піксельне зображення (хоча воно не повинно бути)

Ви можете зробити не так багато, якщо система має помилковий рендерінг. Ви надаєте кінцевому додатку вибір, і вони можуть використовувати його для прийняття поганих рішень.

Який краще

Це залежить від того, наскільки добре ви можете надати зображення та яку пропускну здатність у вас є. Звичайно, можна зробити кращий рендер, ніж те, що роблять браузери. Не дивно, що можна зробити кращу роботу, ніж Illustrator. Але тоді ви втрачаєте всі переваги відкладеного візуалізації.

Є третій варіант.

Якщо ви не задоволені результатами, ви завжди можете спробувати зробити свій власний механізм візуалізації. З платформами, які підтримують webgl, ви можете. Дивіться тут приклад . Але це досить жорстко і не економить деталі реалізації форми.

(Ще недостатньо балів, щоб прокоментувати відповідь Річарда Б. безпосередньо.)

Щоб відповісти на ваше запитання Річард Б, ми часто бачимо цей ефект на елементах, які потребують антизшивання на апаратному забезпеченні з меншою потужністю. Це трапляється навіть на елементах DOM із закругленими кутами, коли зменшення згладжування зменшується або видаляється з цих середовищ.

У нашій компанії у нас є деякі випадки, коли ми використовуємо обладнання з меншою потужністю і почали стикатися з цією проблемою "надзвичайно зубчастих обрізних фігур". Для покращення продуктивності ми відключили / зменшили кількість антисеаз. Це, мабуть, та сама причина, що ваші тести на мобільних пристроях повернули результати, які вони зробили.