Завантажте файл, налаштуйте, завантажте SVG. Акаунт не потрібен.
01
Завантажте
Перетягніть зображення до 10 MB або натисніть, щоб вибрати його. Попередній перегляд з'явиться за кілька секунд.
02
Налаштуйте
Почніть із пресету, як-от Logo & Icon, Photo чи Black & White, а тоді точно підлаштуйте деталізацію, кольори й кути – попередній перегляд оновлюється одразу.
03
Завантажте SVG
Коли попередній перегляд вас влаштовує, завантажте SVG. Файл ваш, без водяного знака.
PNG і SVG коротко
PNG – це растровий формат: незмінна сітка пікселів, стиснена без втрати деталей, з необов'язковим альфа-каналом для прозорості. Якщо збільшити PNG понад його початковий розмір, краї стають розмитими й «сходинковими», бо додаткових пікселів, щоб показати більше, немає.
SVG описує форми як контури в невеликому текстовому файлі, тому лишається чітким за будь-якого розміру, а його можна перефарбувати у Figma, Illustrator, Inkscape або за допомогою CSS. Під час конвертації PNG ділянки подібного кольору трасуються в такі контури. Це перемальовує те, що вже є на зображенні, але не додає деталей, яких там ніколи не було.
Що відбувається з прозорістю, коли PNG стає SVG
Альфа-канал зберігає для кожного пікселя, наскільки він прозорий: від повністю прозорого до повністю непрозорого. В SVG немає пікселів, які б несли це значення, тому трасувальник вирішує для кожної ділянки, чи малювати фігуру, чи залишити місце порожнім. Розуміння того, як він вирішує, пояснює більшість несподіванок, з якими стикаються користувачі.
Повністю прозорі ділянки залишаються порожніми
Там, де PNG повністю прозорий, фігури не малюються. Логотип на прозорому тлі й залишиться логотипом на прозорому тлі, готовим до розміщення на будь-якому кольорі чи фото.
Напівпрозорі пікселі стають суцільними
Кожна трасована фігура отримує один непрозорий колір заливки. М'які тіні, світіння й напівпрозорі накладки перетворюються на суцільні фігури, часто темніші, ніж здавалися. Приберіть їх перед конвертацією або сховайте їхній колір у палітрі після трасування.
М'які краї можуть залишити облямівку
Пікселі згладжених країв частково прозорі, і деякі з них трасуються як тонкі смужки трохи іншого відтінку. Наблизьте контур. Якщо бачите облямівку, сховайте цей колір у палітрі або посуньте повзунок «Деталізація» ближче до «Чистіше».
Білий фон – це не прозорість
Якщо PNG має суцільний білий або кольоровий фон, цей фон трасується як будь-яка інша фігура. Скористайтеся функцією «Видалити фон» у редакторі перед трасуванням або сховайте колір фону в палітрі згодом.
Знімки екрана, експорти з Canva і Figma
Більшість PNG, які люди хочуть отримати у векторі, ніколи не малювалися як PNG. Це знімки екрана або експорти з дизайн-інструментів, і кожне джерело залишає на зображенні свої сліди.
Знімки екрана
Текст і значки на екрані згладжуються, тому дрібні літери трасуються в округлі плями. Збільште сторінку чи застосунок перед знімком, а потім обріжте до потрібної графіки замість трасування всього вікна.
Завантаження з Canva
Чи дозволяє Canva завантажити PNG із прозорим тлом, залежить від вашого тарифу. Якщо вам доступне завантаження SVG, скористайтеся ним: дизайн експортується у векторі, і трасування не потрібне.
Експорти з Figma
Figma може експортувати будь-який фрейм чи шар як SVG, що точно зберігає початкові векторні фігури. Трасуйте PNG, лише якщо вихідний файл втрачено, а за можливості беріть експорт у 2x або 3x – краї будуть чистішими.
Малі експорти
У значків, експортованих у 16 або 32 пікселі, на одну криву припадає так мало пікселів, що трасування повторює піксельні сходинки. Перед конвертацією заново експортуйте найбільший доступний розмір.
PNG-8 і PNG-24: чому важлива глибина кольору
PNG-8 зберігає палітру до 256 кольорів, і кожен піксель вказує на один із них. PNG-24 зберігає повний колір кожного пікселя, а з альфа-каналом його часто називають PNG-32. Більшість дизайн-інструментів за замовчуванням зберігають PNG-24; PNG-8 зазвичай походить з інструментів оптимізації та старої веб-графіки.
Плоский логотип у PNG-8 трасується у жменьку чистих фігур, бо кольорів для розділення небагато. З PNG-8, зробленим із фото чи градієнта, інакше: бракуючі відтінки зазвичай імітують растрованим розсіюванням (дизерингом) – візерунком із крапок, який трасувальник перетворює на скупчення дрібних фігур. PNG-24 зберігає гладкі краї та градієнти, а пресет Logo & Icon або повзунок «Кольори» зводить їх у плоскі ділянки, коли потрібен простіший SVG.
Які PNG-зображення конвертуються добре
Хороші кандидати
Логотипи й іконки, експортовані з прозорим тлом
Стікери, кліпарти й плоскі ілюстрації з чіткими контурами
Підписи, рукописні написи та штрихова графіка
Діаграми й графіки, експортовані зі слайдів чи таблиць
Фото, збережені як PNG: вони трасуються в тисячі дрібних плям
Знімки цілої сторінки з дрібним текстом
Зображення, чиї м'які тіні, світіння чи градієнти мають зберегтися без змін
Значки, доступні лише в розмірі від 16 до 32 пікселів
Якщо ви працюєте в Adobe Illustrator, функція «Трасування зображення» (Image Trace) виконує ту саму роботу з ручним керуванням кожним параметром. У нашому посібнику конвертація PNG у SVG в Illustrator розглянуто важливі налаштування.
Запитання про PNG у SVG
Чи зберігається прозорий фон?
Так. Повністю прозорі ділянки PNG не отримують фігур, тож фон SVG теж прозорий. Напівпрозорі пікселі, як-от м'які тіні й світіння, трасуються як суцільні фігури.
Чому мій SVG має білий фон?
У PNG суцільний білий фон, а не прозорий, і він трасується як будь-який інший колір. Скористайтеся функцією «Видалити фон» перед трасуванням або сховайте білий колір у палітрі, щоб прибрати ці фігури.
Чому навколо країв мого логотипа з'являються тонкі смужки?
Вони походять від пікселів згладжених країв, які частково прозорі й трохи відрізняються за кольором. Сховайте зайвий колір у палітрі або посуньте повзунок «Деталізація» ближче до «Чистіше».
Чи можна конвертувати знімок екрана в SVG?
Так, але спершу обріжте його до потрібної графіки. Дрібний текст на екрані розмивається згладжуванням і погано трасується, тож за можливості робіть знімок у більшому масштабі.
Що краще конвертується: PNG-8 чи PNG-24?
PNG-8 із плоскими кольорами чисто трасується в кілька фігур. PNG-24 краще, коли версія PNG-8 мала б дизеринг, бо крапки дизерингу перетворюються на скупчення дрібних фігур.
Чи буде SVG меншим за PNG?
Для логотипів, іконок і плоскої графіки зазвичай так. Для фото він часто більший. Можна завантажувати файли до 10 MB, а зображення з довшою стороною понад 4096 пікселів перед трасуванням зменшуються.
У якому форматі ваш файл?
Ця сторінка приймає JPG, WebP, GIF, BMP і TIFF так само, як і PNG. У кожного формату є свої особливості перед трасуванням і окрема сторінка з посібником про них.
