SVG не має пікселів, тож це рендеринг, а не конвертація

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

Чому вам взагалі може знадобитися PNG

Формат чудовий, але майже ніде не підтримується. Поштові клієнти не відображають SVG. Офісні програми чинять опір при вставці. Соціальні мережі та більшість форм завантаження відхиляють його, а програми поза сферою дизайну сприймають SVG як текстовий файл, бо технічно він ним і є. PNG — це універсальний варіант, який приймають усі.

Великий розмір тут нічого не коштує

Збільшення фотографії вигадує пікселі, яких ніколи не було, тому при 2x вона стає розмитою, а при 10x — перетворюється на кашу. Рендеринг векторної графіки не має такого обмеження. Значок у 24 пікселі, відрендерений у 1024 пікселі, — це не збільшена копія, а те саме зображення, виконане заново у 1024 пікселях, з усіма кривими й контурами, розрахованими для цього розміру. Ми перевірили це: значок 24 на 24 повернувся як 1024 на 1024 з ідентичними кольорами, байт у байт, і плавними згладженими краями замість «сходинок».

Практична порада випливає з цього: рендерте у найбільшому розмірі, який реально будете використовувати, а не у найменшому, бо отриманий PNG — це вже фіксована сітка пікселів. Збільшення розміру коштує лише кілька мілісекунд часу.

Ви обираєте розмір, або це робить файл

Введіть ширину — і зображення підлаштується під неї зі збереженням пропорцій. Якщо ви попросите логотип 2:1 у розмірі 400 на 400, отримаєте чітке 400 на 200, а не сплюснутий квадрат. Є готові пресети на 256, 512, 1024 і 2048, а також опція «Оригінал», яка рендерить у розмірі, вказаному у самому SVG. Для файлу з розмірами 200 на 100 опція «Оригінал» повернула саме 200 на 100. Максимум — 16 384 пікселі з боку та 64 мегапікселі загалом, що покриває рендер 8000 на 8000.

Прозорість, у тому числі часткова

PNG підтримує справжній альфа-канал, тож логотип із прозорим фоном повертається з прозорим фоном — готовий для розміщення на слайді чи сторінці товару без білого прямокутника. Важлива відмінність якісного рендерера — підтримка часткової прозорості: м’які тіні, розмиті краї, будь-що з напівпрозорістю. Для фігури із 50% прозорістю результат мав альфа-значення 128, тобто рівно половину. Кожен рендер повертався як справжнє RGBA-зображення. Якщо хочете прибрати прозорість, перемкніть фон на суцільний колір і оберіть потрібний відтінок у палітрі.

Текст і градієнти — дві речі, які зазвичай ламаються

Серверний рендеринг SVG часто дає збій у двох місцях. Шрифти можуть бути відсутні, тому текст зникає або відображається іншим шрифтом. А градієнти, визначені окремо й підключені через id, можуть не відображатися, тому фігури стають плоскими або чорними. Ми перевірили обидва випадки. Текст рендерився з чистими згладженими краями, а лінійний градієнт із url() відображався як плавний перехід між кольорами. Якщо файл вимагає шрифт, якого немає на сервері, використовується заміна, і про це повідомляється у результаті, щоб ви знали про це відразу.

Завантажувати чужий SVG тут безпечно

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

Швидко і з передбачуваним результатом

Класичний тигр Ghostscript — 94,5 КБ складних безьє-кривих і типовий тест для SVG-рендерерів — був відрендерений у PNG 512 пікселів за 53 мілісекунди. Повторний рендер того ж файлу дає байт-у-байт ідентичний результат, тож його можна відтворити точно, а не приблизно. Стиснуті .svgz-файли читаються напряму, а формат визначається за байтами файлу, тож навіть перейменований файл чи без розширення все одно рендериться.

Набір іконок за один раз

Кілька файлів рендеряться з однаковими налаштуваннями й повертаються у вигляді одного ZIP під оригінальними іменами. Три різні файли з ім’ям icon.svg повертаються як icon.png, icon_1.png і icon_2.png, а не зникають без сліду. Пошкоджений або не-SVG файл у пакеті просто пропускається й зазначається у результаті, не зупиняючи обробку інших.

Що ви отримуєте

• PNG, відрендерений у вибраному вами розмірі, а не збільшену копію маленького
• Збережені пропорції — нічого не повертається розтягнутим чи стиснутим
• Повна підтримка альфа-каналу, включно з напівпрозорими фігурами та м’якими тінями, або будь-який фон, який ви оберете
• Текст і градієнти рендеряться, а не ігноруються, із повідомленням про заміну шрифтів
• Жодних виконуваних скриптів і жодних зовнішніх посилань — невідомий SVG безпечно завантажувати
• Без реєстрації, без водяних знаків, файли видаляються із сервера через годину

Що далі?

Файл із рендером у 4000 пікселів — це великий розмір, тому Стиснути PNG — це звичайний наступний крок перед розміщенням на сторінці, а PNG у WebP дозволяє ще більше оптимізувати для вебу. Якщо ви зберігаєте і вектор, Стиснути SVG спочатку видалить із нього зайве від редактора.