Перед початком
Візьміть три справжні файли: фото, простий логотип і знімок інтерфейсу з дрібним текстом. Запишіть розмір показу та потребу в прозорості для кожного.
Текстове пояснення схеми
Фото → растр → Логотип → SVG → Інтерфейс → чіткі краї. Іконку кола описує одна фігура. Портрет містить безліч переходів: автоматичне трасування може створити важкий SVG і спотворити обличчя. Фото всередині SVG не стає незалежним від роздільності.
Як зробити
- Фотографію залишайте растровою: JPEG, WebP або AVIF залежно від вимог проєкту. Оцінюйте спотворення на складних деталях і не віддавайте величезний оригінал маленькій картці.
- Простий логотип або схему готуйте в SVG, якщо це дозволяють права й інструменти. Перевірте viewBox, зовнішні ресурси й читабельність у малому розмірі. SVG невідомого походження спочатку перевіряють як код.
- Для інтерфейсу порівняйте PNG та WebP: контрастні дрібні літери чутливі до втрат. Не перетворюйте всю інструкцію на картинку — поряд потрібен доступний текст.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#fa4616"/></svg>Розгляньмо приклад
Іконку кола описує одна фігура. Портрет містить безліч переходів: автоматичне трасування може створити важкий SVG і спотворити обличчя. Фото всередині SVG не стає незалежним від роздільності.
Перевірте результат
Збільште логотип, зменште до іконки та перевірте на темному тлі. Для фото оцініть деталі за реального розміру показу й перевірте ресурс, вибраний браузером.
Де легко помилитися
Розширення SVG не гарантує компактності чи безпеки. Файл може містити растрові дані, скрипти та зовнішні посилання.
Джерела й продовження
- MDN — Responsive images
- Векторная и растровая графика для web — 2009-01-24 (RU)
Схема й приклади: редакція Web Article. Схема пояснює принцип і не є знімком інтерфейсу або результатом випробування програми.