Конвертер SVG у WebP
Перетворіть векторний файл на WebP саме тієї ширини в пікселях, якої потребує ваш макет. Це зручно, коли CMS не приймає SVG, прев’ю для соцмереж має бути растровим або ілюстрація містить стільки контурів, що браузер повільно її промальовує.
Конвертер зображень
або перетягніть Файли JPG, JPEG, JPE … сюди ·
До 95 МБ на файл· До 20 файлів· Видаляються через 30 хв
Файли обробляються на наших серверах і видаляються через 30 хв.
85 зберігає фото візуально ідентичними оригіналу. Зменшуйте лише тоді, коли потрібен менший файл.
JPG, BMP і EPS не підтримують прозорість. Прозорі пікселі заповнюються цим кольором.
Hex-колір для заливки під прозорими пікселями, наприклад #FFFFFF.
Цей формат містить одне зображення. Оберіть вихідний формат GIF або WebP, якщо хочете зберегти анімацію.
Багаторозмірна іконка містить кілька роздільностей в одному файлі; браузери та операційні системи обирають потрібну.
Залиште початкові розміри або введіть одну сторону — пропорції збережуться.
Пікселі для сторони, обраної вище.
Відсоток від початкових розмірів.
sRGB підходить для екранів і вебу. Для друку залиште оригінальний; відтінки сірого відкидають колір.
Лише метадані, 0 зберігає початкове значення. Принтери та деякі портали читають це число; воно не змінює піксельні розміри.
Як користуватися цим інструментом
- 1
Виберіть файл SVG
Додайте до 20 файлів .svg, експортованих із Figma, Illustrator, Inkscape або бібліотеки діаграм, по 95 MB кожен.
- 2
Задайте ширину результату
Змінити розмір результату за замовчуванням має ширину 1200 px; вкажіть удвічі більшу за ширину, яку зображення займатиме на сторінці. Якість — 90, або для плоских логотипів та іконок позначте Без втрат у Додаткові налаштування.
- 3
Конвертуйте у WebP
Натисніть Конвертувати в WebP і завантажте файли або один ZIP. Прозорі ділянки лишаються прозорими.
Як конвертувати SVG у WebP із потрібним розміром?
Завантажте SVG, у Змінити розмір результату вкажіть потрібну ширину в пікселях (за замовчуванням 1200 px) і натисніть Конвертувати в WebP. Вектор малюється заново на цю ширину, тож нічого не збільшується й не розмивається.
Коли SVG варто перетворити на WebP
SVG став рекомендацією W3C у 2001 році й є правильним форматом для більшості логотипів та іконок: кілька кілобайтів тексту, що лишається чітким за будь-якого масштабу. Проблеми починаються, коли файл виходить за межі вашого коду. WordPress і багато хмарних конструкторів магазинів відмовляють у завантаженні SVG, превʼю посилань у Facebook, LinkedIn та X завантажуються як растрові зображення, а дизайнерські програми експортують ілюстрації з вбудованими растровими ефектами, що перетворюють вектор на кілька мегабайтів розмітки.
WebP, який Google випустила 2010 року, а Safari нарешті підтримав у версії 14 у 2020-му, — це растровий формат, створений саме для цього: менший за PNG за такого самого вигляду, з повноцінним альфа-каналом. Рендер SVG одразу у WebP у фінальному розмірі оминає звичний обхід через великий PNG. Якщо потрібен і зворотний напрям, на сторінці WebP у SVG пояснено, чому там потрібне трасування, а не конвертація.
Розміри SVG у WebP для типових місць на сайті
1200 × 630 px
Превʼю посилання Open Graph
Зображення, яке показується, коли діляться сторінкою
1920 × 1080 px
Ілюстрація на всю ширину (hero)
Покриває більшість настільних екранів у масштабі 1×
1600 × 900 px
Зображення в колонці блогу у 2×
Для колонки вмісту 800 px
400 × 100 px
Логотип у шапці у 2×
Для місця під логотип 200 × 50 px
SVG
Масштабована векторна графіка (SVG)
SVG — векторний формат на основі XML, стандартизований W3C у 2001 році. Замість пікселів він описує фігури, контури та текст, тож залишається чітким за будь-якого розміру, а для логотипів і значків зазвичай дуже малий. Підтримує прозорість, стилі CSS, скрипти та анімацію, а кожен браузер відображає його нативно. SVG не підходить для фотографій, а складні ілюстрації можуть повільно відображатися. Відкрити й редагувати його можна в Illustrator, Inkscape, Figma та браузерах.
- Стиснення
- –
- Прозорість
- Так
- Анімація
- Так
- Рік появи
- 2001 · W3C
WEBP
Зображення WebP
WebP — формат зображень, випущений Google у 2010 році, щоб вебсторінки завантажувалися швидше. В одному форматі він підтримує стиснення як із втратами, так і без втрат, альфа-прозорість та анімацію. WebP із втратами зазвичай на 25–35% менший за JPEG подібної візуальної якості, а WebP без втрат, як правило, менший за PNG. Його підтримують усі сучасні браузери, але деякі старіші настільні програми, служби друку та форми завантаження досі його відхиляють. Windows, macOS і більшість сучасних графічних редакторів можуть відкривати файли WebP.
- Стиснення
- З втратами або без втрат
- Прозорість
- Так
- Анімація
- Так
- Рік появи
- 2010 · Google
SVG конвертують у WebP, щоб отримати легку растрову картинку фіксованого розміру для місць, які не приймають векторні файли або повільно їх малюють, як-от CMS, превʼю в соцмережах чи насичена лендинг-сторінка; WebP у SVG — це трасування, а не заміна формату.
Як SVG растеризується і що перевірити
Конвертер зчитує власні width, height і viewBox в SVG, а потім малює кожен контур на вказану вами ширину; висота визначається співвідношенням сторін. Оскільки малювання відбувається у фінальному розмірі, тонкі лінії та дрібний текст згладжуються один раз, у правильному масштабі. Пізніше збільшений малий PNG ніколи не виглядає так чисто.
Шрифти — звична несподіванка. Якщо SVG посилається на гарнітуру, яку не вбудовано й не перетворено на контури, використовується запасний шрифт, і довжина рядків змінюється. Перетворіть текст на контури в дизайнерській програмі перед експортом. Зовнішні зображення, підключені в SVG за URL, не завантажуються, тож вбудуйте їх або спершу зведіть макет.
Конвертер SVG у WebP: що робити і чого уникати
| Робіть | Не робіть |
|---|---|
| Рендеріть у 2× від показуваної CSS-ширини | Конвертувати прості вбудовані іконки, які в SVG менші |
| Використовуйте Без втрат для плоских логотипів із кількома кольорами | Рендерити в 4000 px для місця 600 px |
| Зберігайте SVG-оригінал для майбутніх розмірів | Надсилати WebP в email-розсилках |
| Підключайте WebP з атрибутами width і height, щоб уникнути зсуву макета | Чекати живого тексту: WebP — це пікселі, а не виділюваний текст |
Запитання про конвертацію SVG у WebP
Яку ширину в пікселях вибрати, щоб конвертувати SVG у WebP?
Візьміть ширину, з якою зображення показується в CSS-пікселях, і подвойте її, щоб воно лишалося чітким на екранах телефонів і ноутбуків із високою щільністю пікселів. Ілюстрацію в колонці 800 px слід рендерити в 1600 px. Збільшення до 3× у вебі рідко виправдане: файл росте, а помітний виграш невеликий.
Що краще для сайту: WebP чи SVG?
Для простих логотипів, іконок і діаграм не потрібно: чистий SVG крихітний і чіткий за будь-якого розміру, тож залиште його. WebP виграє для складних ілюстрацій з градієнтами, фільтрами чи тисячами контурів і там, де приймають лише растрові зображення, наприклад у превʼю для соцмереж або CMS без підтримки SVG.
Чи зберігає WebP прозорий фон мого SVG?
Так. WebP має повноцінний альфа-канал і зі стисненням із втратами, і без втрат, тож ділянки без заливки в SVG лишаються прозорими. Краї фігур згладжуються щодо прозорості, що добре виглядає на будь-якому кольорі тла.
WebP із втратами чи без втрат для векторної графіки?
Режим «Без втрат» підходить для плоских логотипів, іконок і діаграм із кількома суцільними кольорами: вони дуже добре стискаються й мають бездоганно чіткі краї. Стиснення з втратами з якістю 85–90 підходить для ілюстрацій із градієнтами, тінями чи текстурами, де файли без втрат стають важкими. Спробуйте обидва варіанти на одному файлі й залиште менший результат, який виглядає чисто.
Чому WordPress не дозволяє завантажити SVG?
WordPress не включає SVG до дозволених типів завантаження, бо SVG може містити скрипти. WebP він приймає з версії 5.8, випущеної 2021 року, тож після конвертації медіатека прийме файл без плагіна безпеки. Якщо потрібні справжні вектори, SVG можна додати через плагін із санітизацією.
Чи можна використати WebP в email-розсилці?
Краще уникайте. Кілька поштових клієнтів, зокрема настільний Outlook для Windows, не показують WebP, а Gmail не відображає й SVG. Для email краще відрендерити зображення через SVG у PNG.
