Завантажили SVG-іконку на сайт, а WordPress мовчки відмовляється її приймати. Знайома ситуація? Стандартно рушій блокує файли .svg з міркувань безпеки, і спроба залити логотип до медіабібліотеки завершується помилкою «Вибачте, цей тип файлу не дозволено».

Проблема не в кривому встановленні й не в правах доступу. WordPress свідомо не додає SVG до білого списку, адже XML-структура файлу може містити шкідливий код. Але відмовлятися від векторної графіки не обов’язково: далі три безпечні способи завантажити SVG без ризику для сайту.

💡 Швидкий огляд:

• Дізнайтеся, що таке SVG і чому WordPress його блокує
• Оберіть один із трьох безпечних плагінів для завантаження
• Налаштуйте плагін під свої завдання за пару хвилин
• Порівняйте можливості та отримайте підсумкову рекомендацію

Що таке SVG і чим він відрізняється від JPEG та PNG

SVG (Scalable Vector Graphics) — це векторний формат на основі XML. На відміну від растрових JPEG і PNG, які складаються з пікселів, SVG описує зображення математично: лініями, кривими та фігурами. Результат, картинка, яка не втрачає чіткості ні на екрані 4K, ні на рекламному банері завбільшки зі стіну.

Для власника сайту це означає три речі. По-перше, логотип та іконки виглядають однаково різко на будь-яких пристроях, від телефону до монітора. По-друге, файл .svg важить у рази менше за аналог у PNG: типова іконка займає 1-3 КБ замість 15-30 КБ. По-третє, SVG можна анімувати через CSS і JavaScript без сторонніх бібліотек.

Але є й зворотний бік. XML-структура читається браузером як код, і зловмисник може вшити у файл скрипт. Саме тому WordPress не включає SVG до списку дозволених форматів «зі стандартної комплектації». Під час спроби завантаження ви бачите ту саму помилку зі скриншоту вище.

Безпека SVG: що потрібно знати перед завантаженням

Файл .svg — це текстовий документ із тегами на кшталт <svg>, <path> і <circle>. Браузер парсить його майже як HTML. Якщо всередині файлу схований тег <script> або обробник onload, браузер виконає цей код. Це називається stored XSS: шкідливий скрипт зберігається на сервері та спрацьовує щоразу, коли відвідувач відкриває сторінку.

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

Правило просте: ніколи не завантажуйте SVG із неперевірених джерел. Якщо файл зробив ваш дизайнер або завантажено з офіційного сайту іконок, ризики мінімальні. Якщо файл надійшов від незнайомого замовника електронною поштою, спочатку відкрийте його в текстовому редакторі та переконайтеся, що всередині немає тегів <script> і on*-атрибутів.

Далі, три плагіни, які розв’язують проблему завантаження SVG із різним рівнем контролю та налаштувань.

Спосіб 1: SVG Support, максимум можливостей

SVG Support, найпопулярніший плагін для завантаження векторної графіки в WordPress. 1+ мільйон активних установок, рейтинг 4,5 на WordPress.org і стабільні оновлення (останнє, травень 2026) говорять самі за себе.

Установка стандартна: Plugins → Add New, у рядку пошуку наберіть «SVG Support», натисніть Install Now і потім Activate. Після активації зайдіть у Settings → SVG Support.

Головне налаштування, яке варто ввімкнути одразу,, Restrict to Administrators. Воно забороняє завантажувати SVG усім, крім адміністраторів. Якщо сайт ведете ви один, прапорець захищає від випадкового завантаження небезпечного файлу редактором або SEO-спеціалістом.

Розширений режим (Advanced Mode) вмикає CSS-анімацію та inline-рендеринг SVG. Це потрібно, якщо ви плануєте анімувати іконки або змінювати їхній колір через стилі теми. Без цього прапорця плагін сам підчищає потенційно небезпечні атрибути, й анімація може зламатися.

SVG Support також уміє обгортати завантажені файли в тег <img> із правильними розмірами — це важливо для Core Web Vitals, тому що браузер резервує місце під картинку до її завантаження і сторінка не «стрибає».

• Плюси: тонке налаштування прав доступу, розширений режим для анімацій, автоматичний розмір зображень, регулярні оновлення
• Мінуси: налаштування доступні лише в окремій вкладці (немає інтеграції з медіабібліотекою)
• Ціна: безплатно
• Завантажити: 🔗 SVG Support на WordPress.org

Спосіб 2: Safe SVG, мінімалізм від команди 10up

Safe SVG розроблений агенцією 10up — це хлопці, яким довіряють Microsoft, Adobe і The White House. І це найкраща рекомендація, яку може мати плагін безпеки.

На відміну від SVG Support, Safe SVG не потребує налаштування. Встановили, активували, і все, можна завантажувати SVG. Плагін використовує ту саму бібліотеку санітизації, що й ядро WordPress (library enshrined/svg-sanitize), і пропускає через неї кожен файл у момент завантаження. Жодних зайвих інтерфейсів, жодних налаштувань, просто працює.

Safe SVG дозволяє завантаження SVG усім користувачам, які мають право upload_files. Якщо на сайті кілька авторів, варто додатково обмежити коло, наприклад, через плагін керування ролями. Але для соло-адміністратора це найпростіший і найбезпечніший шлях.

Плагіну вже багато років, у нього 1+ мільйон активних установок і рейтинг 4,4. Оновлюється рідше, ніж SVG Support (останнє, квітень 2026), але це якраз ознака стабільності: ламатися там нічому.

• Плюси: налаштування не потрібне, працює «зі стандартної комплектації», санітизація на рівні ядра WordPress, розробник із бездоганною репутацією
• Мінуси: немає налаштувань прав доступу, немає розширеного режиму для анімацій, немає inline-рендерингу
• Ціна: безплатно
• Завантажити: 🔗 Safe SVG на WordPress.org

Спосіб 3: WP SVG Images, санітизація з контролем ролей

WP SVG Images, розробка команди ShortPixel, відомої своїми інструментами оптимізації зображень. Плагін займає золоту середину між SVG Support і Safe SVG: налаштування ролей є, а зайвих екранів немає.

Після активації плагін одразу дозволяє завантаження SVG усім адміністраторам і редакторам. У Settings → WP SVG Images можна тонко виставити, яким ролям дозволено завантаження, і ввімкнути санітизацію індивідуально для кожної ролі. Наприклад: адміни завантажують без перевірки, редактори, з обов’язковим очищенням, автори, взагалі не можуть.

Окремий плюс, прев’ю SVG прямо в медіабібліотеці. Стандартний WordPress показує іконку-заглушку замість векторного файлу. WP SVG Images рендерить мініатюру, і ви бачите, що саме завантажили, не відкриваючи файл у новій вкладці.

Плагін також надає фільтри для розробників: WPSVG_setAllowedTags і WPSVG_setAllowedAttrs дозволяють додати власні теги й атрибути до білого списку санітайзера.

• Плюси: прев’ю SVG у медіабібліотеці, гнучке налаштування санітизації за ролями, фільтри для розробників, активна підтримка
• Мінуси: немає розширеного режиму анімації, потрібен PHP 5.6.40+
• Ціна: безплатно
• Завантажити: 🔗 WP SVG Images на WordPress.org

Порівняльна таблиця: який плагін обрати

Усі три плагіни безплатні й використовують перевірені бібліотеки санітизації. SVG Support, вибір для тих, кому потрібна анімація та максимум контролю. Safe SVG, для тих, хто цінує простоту й не хоче чіпати налаштування. WP SVG Images, компроміс зі зручним прев’ю та гнучким розподілом прав.

Як встановлювати SVG-плагін і завантажувати файл: покроково

Незалежно від того, який плагін ви обрали, порядок установки однаковий:

Крок 1. В адмінці WordPress відкрийте Plugins → Add New.

Крок 2. У рядку пошуку введіть назву плагіна: SVG Support, Safe SVG або WP SVG Images.

Крок 3. Натисніть Install Now на картці потрібного плагіна, потім Activate.

Крок 4. Якщо плагін має налаштування (SVG Support або WP SVG Images), зайдіть у відповідну вкладку й увімкніть обмеження за ролями. Для Safe SVG цей крок не потрібен.

Крок 5. Відкрийте редактор запису чи сторінки. У блоці «Зображення» натисніть «Завантажити», формат .svg тепер у білому списку.

Перед завантаженням SVG-файлу переконайтеся, що ви довіряєте його джерелу. Ідеально, файли, створені вашим дизайнером в Illustrator, Figma або Inkscape. Якщо отримали SVG від стороннього підрядника, відкрийте його в Блокноті та швидко пробіжіться очима: всередині не повинно бути <script> або onload=.

На практиці трисекундна перевірка файлу очима + санітайзер плагіна дають подвійний запас міцності. За роки роботи з WordPress ми не зустрічали жодного реального інциденту з SVG, завантаженим через будь-який із трьох описаних плагінів.

Якщо віддаєте перевагу відеоформату, у ролику вище показано весь процес від установки плагіна до вставки SVG на сторінку.

⁉️🤔 Часті запитання

Чи можна завантажити SVG без плагіна?

Додайте сніпет із фільтром upload_mimes, який реєструє MIME-тип image/svg+xml. Але ми не рекомендуємо цей шлях: без санітайзера ви відкриваєте сайт для stored XSS. Плагін розв’язує проблему безпеки автоматично, пара кліків проти потенційної діри в захисті.

Чому плагін Enable SVG більше не доступний?

Причина: «Author Request». Плагін не оновлювався 4 роки й знятий із каталогу WordPress.org назавжди. Якщо він у вас встановлений, замініть на один із трьох плагінів вище. Вони активно підтримуються та сумісні з WordPress 7.0.

Як перевірити, що завантажений SVG безпечний?

Безпечний SVG всередині складається з графічних примітивів svg, g і path. Ні script, ні foreignObject, ні атрибути onload або onclick у чистому файлі не зустрічаються. Усі три плагіни зі статті автоматично вирізають небезпечні елементи під час завантаження.

Який формат кращий для логотипа, SVG чи PNG?

SVG для більшості сайтів, правильний вибір. Векторний логотип займає лічені кілобайти, не розмивається на retina-екранах і змінює колір через CSS. PNG потрібен лише якщо логотип містить фотографію або складний градієнт, який криво рендериться у векторі.

WP SVG Images чи Safe SVG, що надійніше?

Різниця в зручності. Safe SVG: «поставив і забув» від елітної агенції. WP SVG Images дає прев’ю в медіабібліотеці та індивідуальні налаштування ролей. За безпекою вони рівнозначні.

Підсумок: що ставити у 2026 році

Усі три плагіни закривають задачу безпечного завантаження SVG, вибір зводиться до сценарію використання.

Потрібна анімація векторних іконок та inline-рендеринг? Беріть SVG Support, це єдиний плагін із розширеним режимом.

Хочете просто завантажити логотип і забути про проблему? Safe SVG, ваш варіант. Поставили, активували, працює.

Важливі прев’ю в медіабібліотеці та тонкий контроль прав доступу для команди? Обирайте WP SVG Images, ShortPixel зробили зручний інструмент із найкращим рейтингом серед SVG-плагінів.

Якщо коротко: встановіть Safe SVG для мінімалізму або SVG Support для повного контролю. Обидва варіанти безплатні й перевірені на мільйонах сайтів. А головне, після встановлення будь-якого з трьох плагінів помилка «тип файлу не дозволено» зникає назавжди.