Конвертер SVG у PNG

Що робить цей інструмент

Цей інструмент перетворює SVG-код або файл .svg на зображення PNG, JPG чи WebP. Вставте розмітку, перетягніть файл, виберіть масштаб або точну ширину й збережіть растрове зображення. Рендеринг відбувається у вашому браузері, тож іконки, логотипи й діаграми ніколи не залишають ваш комп’ютер.

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

Як користуватися

1. Вставте код <svg> у редактор, натисніть Завантажити, щоб відкрити файл, або перетягніть його на сторінку. Приклад завантажує невеликий логотип.
2. Виберіть Розмір: 1× використовує власні розміри SVG, 2×–4× множать їх. Або введіть Власна ширина (px) у пікселях; висота підлаштується за пропорціями.
3. Виберіть Формат: PNG для виводу без втрат із прозорістю, JPG для фото й сумісності, WebP для малих файлів.
4. Виберіть Фон: прозорий, білий або будь-який колір.
5. Натисніть Зберегти. Рядок під переглядом показує підсумковий розмір у пікселях, формат і розмір файлу.

Як визначається розмір

Інструмент дивиться на кореневий елемент <svg>. width і height у px, pt, mm, cm, in або em перетворюються на пікселі. Якщо їх немає або їх задано у відсотках, натомість використовуються ширина й висота з viewBox. Потім застосовується вибраний масштаб чи власна ширина, а SVG переписується з явними розмірами в пікселях, щоб кожен браузер малював його однаково.

Приклад

Іконка з viewBox="0 0 24 24" без width і height за 1× стає PNG розміром 24 × 24. За 4× — 96 × 96, а з власною шириною 512 — PNG 512 × 512, придатним для іконки в магазині застосунків, і досі ідеально чітким, бо його відрендерено з векторів, а не збільшено.

Поради

• Некоректний XML повідомляється з номером рядка, тож можна одразу перейти до проблеми.
• Вбудовані растрові зображення (<image href="data:...">) працюють, а зовнішні посилання — ні.
• Текст використовує шрифти, встановлені на вашому комп’ютері. Щоб результат був піксель у піксель однаковим усюди, спершу перетворіть текст на контури у своїй програмі для дизайну.
• Найбільший розмір виводу обмежено розміром canvas у браузері — близько 16 000 пікселів на сторону.