Skip to content

Всё для WordPress, веб-разработки — и не только

🖼 Как загрузить SVG в WordPress: 3 безопасных способа

🖼 Как загрузить SVG в WordPress: 3 безопасных способа

Загрузили SVG-иконку на сайт, а WordPress молча отказывается её принимать. Знакомая ситуация? По умолчанию движок блокирует файлы .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 из непроверенных источников. Если файл сделан вашим дизайнером или скачан с официального сайта иконок, риски минимальны. Если файл пришёл от незнакомого заказчика по email, сначала откройте его в текстовом редакторе и убедитесь, что внутри нет тегов <script> и on*-атрибутов.

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

Результаты поиска SVG-плагинов в каталоге WordPress

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

Страница настроек плагина 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 из панели WordPress

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 для безопасной загрузки SVG-файлов в WordPress

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

SVG Support

1M+

4,5 ★

✅ (админ / все)

✅ (Advanced Mode)

Safe SVG

1M+

4,4 ★

❌ (только upload_files)

WP SVG Images

30K+

5,0 ★

✅ (по ролям индивидуально)

Все три плагина бесплатны и используют проверенные библиотеки санитизации. 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 для полного контроля. Оба варианта бесплатны и проверены на миллионах сайтов. А главное, после установки любого из трёх плагинов ошибка «тип файла не разрешён» уходит навсегда.