Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Чим SVG відрізняється від растрових зображень?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**SVG** - це векторна графіка, яка описується математичними формулами й координатами, тоді як растрові зображення (JPG, PNG, WebP) складаються з фіксованого набору пікселів. **Ключове:** SVG масштабується без втрати якості, стилізується через CSS та анімується, тоді як растрові формати краще підходять для фотографій і втрачають чіткість при збільшенні.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняГоловна відмінність між **SVG** і **растровими зображеннями (JPG, PNG, WebP)**: у **способі зберігання й відображення** даних: векторна графіка (SVG) описується **математичними формулами**, а растрова: **набором пікселів**. З цієї відмінності випливають усі ключові плюси й мінуси. --- ### 1. Принцип зберігання | Тип зображення | Як влаштовано | |---|---| | **SVG (векторне)** | Складається з **формул і координат**: «намалюй коло радіусом 40 у точці (50,50)» | | **Растрове (JPG, PNG, WebP)** | Складається з **пікселів**: мільйони маленьких кольорових крапок, що зберігаються в пам'яті | Приклад SVG-коду кола: ```html <svg width="100" height="100"> <circle cx="50" cy="50" r="40" fill="tomato" /> </svg> ``` У JPG та сама картинка - це тисячі байтів закодованих пікселів. --- ### 2. Масштабування (головна відмінність) | Критерій | SVG | Растрове | |---|---|---| | При збільшенні | Якість не втрачається: перераховуються формули | Втрачає чіткість: «пікселізується» | | Підходить для | Логотипів, іконок, інтерфейсів, графіків | Фото, реалістичних зображень, текстур | SVG ідеально масштабується: на Retina-екрані і 8K моніторі залишиться **кристально чітким**. Растрове фото під час збільшення стане «розмитим». --- ### 3. Розмір і продуктивність | Параметр | SVG | Растрове | |---|---|---| | Розмір файлу | Дуже маленький (текстовий код) | Може бути важким (до мегабайтів) | | Стиснення | Можна мінімізувати, gzip стискає чудово | Уже стиснуто (JPG/WebP) | | Відрисовка | Швидка, поки зображення нескладне | Швидка, але фіксована | | За складної графіки | Багато елементів → вище навантаження на CPU | Фіксований файл → простіше рендерити | Для логотипа краще SVG, для фото: JPG або WebP. --- ### 4. Можливості та гнучкість | Можливість | SVG | Растрові | |---|---|---| | Масштабується без втрат | Так | Ні | | Змінюється стилями CSS | Так | Ні | | Анімується через CSS/JS | Так | Ні | | Інтерактивність (кліки, hover) | Так | Ні | | Прозорість | Так (через `fill-opacity`) | Так (у PNG, WebP) | | Підтримка градієнтів | Так | Так | | Фотографічна якість | Ні | Так | --- ### 5. Де використовувати кожен формат | Завдання | Що обрати | |---|---| | Логотипи, іконки, схеми, інфографіка | **SVG** | | Фото, скриншоти, текстури, фонові банери | **JPG / WebP** | | Прозорі елементи | **SVG** або **PNG** | | Анімації та інтерфейси | **SVG** (через CSS/JS) | --- ### 6. Наочний приклад | Масштаб 100% | Масштаб 500% | |---|---| | **SVG:** лінії залишаються чіткими | Якість не змінюється | | **JPG/PNG:** з'являються «сходинки» | Розмито, видно пікселі | --- ### Підсумок: | Критерій | **SVG** | **Растрові (JPG, PNG, WebP)** | |---|---|---| | Тип графіки | Векторна | Піксельна | | Якість при збільшенні | Не втрачається | Втрачається | | Розмір файлу | Маленький (для простих форм) | Може бути великим | | Масштабованість | Ідеальна | Обмежена | | Анімація та інтерактивність | Підтримується | Немає | | Найкраща сфера застосування | Іконки, логотипи, графіки | Фото, фонові зображення | --- **Простими словами:** **SVG** - це як **креслення**, яке можна нескінченно масштабувати. **Растрове зображення** - це **фотографія**, де кожен піксель уже заданий. SVG ідеальний для **графіки та інтерфейсів**, а растрові формати: для **реалістичних зображень і фотографій**.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.