Що таке SVG? Простий посібник із векторного формату

1. Що таке SVG?

SVG означає Scalable Vector Graphics — відкритий векторний формат на основі XML, стандартизований W3C. Там, де PNG і JPG зберігають зображення як сітку пікселів, SVG використовує математичні формули для опису фігур: пряму, коло, криву Bézier — кожна записана у файлі як координати та команди шляху.

Саме тому SVG ніколи не розмивається під час збільшення: браузер просто перемальовує формули в новому розмірі, а не розтягує пікселі. Ось що означає слово «вектор».

2. SVG проти PNG / JPG

Аспект	SVG	PNG / JPG
Як зберігає зображення	Математичні шляхи (вектор)	Сітки пікселів (растр)
Під час збільшення	Масштабується нескінченно без спотворень	З’являються сходи та розмитість
Розмір файлу	Дуже малий для простої графіки (кілька КБ)	Зростає лінійно з роздільністю
Редагованість	Текст, який можна редагувати, перефарбовувати й анімувати	Потрібен графічний редактор
Найкраще для	Піктограм, логотипів, ілюстрацій, діаграм	Фотографій і складного освітлення

3. Для чого зазвичай використовують SVG

• Піктограми та логотипи сайтів: один SVG підходить до будь-якої щільності екрана й залишається чітким на Retina-дисплеях;
• Ілюстрації та діаграми: бібліотеки візуалізації даних, як-от ECharts і Recharts, за замовчуванням видають SVG;
• Друк і гравіювання: лазерні гравірувальники, верстати для розкрійки вінілу та УФ-принтери широко приймають шляхи SVG;
• Анімація: шляхи SVG можна керувати безпосередньо через CSS / SMIL / JavaScript, що дозволяє ефекти малювання ліній і багато іншого.

4. Як відкрити та відредагувати SVG?

Будь-який сучасний браузер (Chrome / Edge / Firefox / Safari) відкриває SVG-файли безпосередньо, а графічні програми на кшталт Illustrator, Figma та безкоштовного Inkscape вміють їх редагувати. Якщо потрібно лише перефарбувати, прибрати тло або стерти частину зображення, скористайтеся онлайн-редактором SVG від PolySVG — без встановлення програм.

5. Як перетворити мої PNG / JPG на SVG?

Скористайтеся інструментом «Зображення в SVG» від PolySVG: завантажте растр, і власна модель автоматично виконає квантизацію кольорів, трасування контурів і підгонку кривих, повернувши редагований SVG за кілька секунд, з видаленням тла одним кліком. Весь процес безкоштовний і не потребує реєстрації.

Підсумок: SVG — формат, який «малює формулами», тож природно пасує піктограмам, логотипам і всьому, що має масштабуватися; фотографічний матеріал і далі краще обробляти через JPG / WEBP.