Що це за інструмент?
SVG — це векторний формат: фігури, описані математично, безмежно масштабовані, ідеальні для логотипів та іконок. Але багато місць його не приймають: документи Word, більшість соцмереж, поштові клієнти й безліч форм завантаження хочуть растрові зображення. Конвертація (растеризація) рендерить вектор у PNG чи JPG заданого розміру.
Оскільки вектори не мають фіксованої роздільної здатності, ви самі обираєте ширину виводу — і оскільки джерело є математикою, експорт у 2048px такий самий чіткий, як і в 256px. Вивід у PNG зберігає прозорий фон SVG; JPG заповнює його білим кольором.
Навіщо його використовувати?
- Будь-яка роздільна здатність з одного джерела: від фавікона 256px до друкованого ресурсу 2048px, усе піксельно точне.
- Вивід у PNG зберігає прозорість — логотипи лягають на будь-який фон.
- Виправляє відхилення "SVG не підтримується" при завантаженні за лічені секунди.
- Пакетна конвертація, локальна обробка, без завантаження на сервер.
- Обробляє SVG без явно вказаних ширини/висоти, зчитуючи їхній viewBox.
Як користуватися
- Перетягніть файли .svg у поле або клацніть, щоб обрати.
- Оберіть ширину виводу — режим "Авто" використовує власний розмір SVG.
- Оберіть PNG (зберігає прозорість) або JPG (білий фон).
- Завантажте кожне відрендерене зображення; розміри показані для кожного файлу.
Приклад
Введення
logo.svg — вектор на 4 КБРезультат
logo.png — 1024×1024, прозорий фон, чіткий на кожному пікселіОдне крихітне векторне джерело дає піксельно точні растри в будь-якому потрібному розмірі.
Типові сценарії використання
- Додавання логотипу компанії (зазвичай наданого дизайнером у форматі SVG) у документ Word чи PowerPoint, що не підтримує вбудовування SVG.
- Генерування іконок застосунку чи фавіконів у кожному потрібному піксельному розмірі (16, 32, 180, 512px) з одного головного SVG.
- Додавання іконки до підпису в email, оскільки більшість поштових клієнтів рендерять лише растрові зображення.
- Завантаження графіки на платформу соцмережі чи CMS, що відхиляє SVG-файли як запобіжний захід безпеки при завантаженні.
Чому взагалі існують обмеження на завантаження SVG
Багато платформ спеціально блокують завантаження SVG з міркувань безпеки, а не через недогляд: оскільки SVG базується на XML і технічно може вбудовувати JavaScript, шкідливий SVG може стати вектором для впровадження скриптів, якщо платформа рендерить його без санітизації. Растеризація SVG у PNG чи JPG прибирає все, окрім піксельних даних, і саме тому ця конвертація часто є обов'язковою, а не просто зручною — цільова платформа справді не може безпечно приймати векторний формат, незалежно від того, наскільки безпечний ваш конкретний SVG.
Як насправді працює незалежність від роздільної здатності
Файл SVG узагалі не зберігає пікселі — він зберігає математичні визначення шляхів ("провести лінію від цієї точки до тієї", "заповнити цю криву цим кольором") і viewBox, що визначає координатний простір, у якому ці шляхи існують. Коли ви растеризуєте його, рушій рендерингу браузера перераховує кожну криву й заливку в потрібних вам піксельних розмірах, з нуля, щоразу. Це принципово відрізняється від зміни розміру наявного растрового зображення (JPG чи PNG), де збільшення означає вигадування пікселів, яких ніколи не існувало, і завжди виглядає розмито — SVG, відрендерений у 4000px, такий самий чіткий, як і у 100px, тому що обидва свіжо обчислені з тих самих точних математичних даних, а не розтягнуті з меншого джерела.
Часті запитання
Яку роздільну здатність експортувати?
Відповідайте найбільшому розміру, у якому зображення буде показане, і трохи більше: 512px покриває більшість веб-використань логотипу, 1024px+ для retina-екранів і презентацій, 2048px для друку. На відміну від апскейлу фотографії, великий експорт із SVG нічого не коштує з погляду чіткості.
Чому мій SVG рендериться порожнім або зламаним?
Зазвичай це через зовнішні посилання: SVG, що посилаються на зовнішні зображення, шрифти чи CSS, не можуть завантажити їх усередині пісочниці безпеки браузера. SVG із вбудованим (вкладеним) вмістом конвертуються нормально. Текст також може зміститися, якщо використовує шрифт, якого немає у вашій системі.
PNG чи JPG на виході — що обрати?
Майже завжди PNG: логотипам та іконкам потрібна прозорість і чіткі краї, які PNG зберігає, а JPG псує. Обирайте JPG лише коли ціль строго цього вимагає або SVG — фотоподібна ілюстрація.
Чи можу я конвертувати PNG назад у SVG тут?
Ні — це принципово інше завдання (трасування пікселів у фігури), яке в кращому випадку дає наближення. Цей інструмент працює у напрямку вектор → растр, що є точним.
Чи завантажується мій SVG для конвертації?
Ні. Браузер рендерить SVG на локальному canvas і кодує PNG/JPG на вашому пристрої. Нічого не передається.
Мій SVG варто експортувати як PNG чи JPG?
Якщо в графіці є прозорість — логотип, що має лягати на будь-який фон, — обирайте PNG: у JPG немає альфа-каналу, і він заповнить прозорі ділянки суцільним кольором. PNG також краще підходить для чіткої графіки на кшталт іконок і діаграм. Обирайте JPG лише коли SVG містить фотографічний або сильно градієнтний вміст і розмір файлу важливіший за чіткість країв.