Безопасная загрузка SVG в WordPress

Просмотров: 1 837

Как загрузить SVG на сайт WordPress? Как включить поддержку SVG в ВордПресс? Разрешить загружать SVG в WordPress довольно просто, поскольку для этого есть специальные плагины. WordPress по умолчанию не позволяет загружать файлы в формате SVG, в основном из соображений безопасности. Но вы сможете безопасно загружать в WordPress SVG, а также отображать встроенные SVG в сообщениях и на страницах WordPress установив один из предложенных плагинов.

SVG — это векторное изображение на основе XML, которое обычно используется сайтами и брендами для отображения логотипов и значков на своих веб-сайтах. Изображения автоматически масштабируются как в браузерах, так и в инструментах для редактирования фотографий.  

SVG обычно меньше по размеру, чем PNG или JPG. Используя SVG, вы также можете ускорить свой сайт WordPress, так как уменьшите общий размер страницы.

Как уже было сказано, по умолчанию WordPress позволяет загружать все популярные форматы файлов изображений, аудио и видео, но SVG не входит в их число. При попытке загрузки картинки в формате SVG вы увидите такое сообщение:

Ошибка при загрузке SVG
Извините, вам не разрешено загрузить этот тип файла

Но что делать, когда очень нужно? Решение есть! В этой статье я покажу вам, как легко и безопасно добавить SVG в WordPress.

Как безопасно включить поддержку WordPress SVG

В целом, добавить поддержку SVG в WordPress на практике относительно просто. Настоящая трудность заключается в том, чтобы сделать это таким образом, чтобы ваш сайт WP не стал уязвимым для потенциальных атак. Прямо сейчас уже есть несколько плагинов с дезинфицирующими средствами, которые вы можете использовать для обеспечения безопасности ваших SVG-файлов.

Вы можете использовать бесплатный плагин WordPress из его репозитория, для того чтобы начать работу. Этот метод предлагает полную поддержку добавления файлов SVG в WordPress. Он также позволяет отображать встроенный SVG в сообщениях и на страницах WordPress.

Как добавить SVG WordPress
Разрешить загрузку SVG WordPress
Лучшее решение — использовать на сайте WordPress только файлы SVG, созданные надежными источниками и ограничить загрузку SVG только доверенными пользователями.

Масштабируемая векторная графика (SVG) становится обычным явлением в современном веб-дизайне, позволяя встраивать изображения с файлами небольшого размера, масштабируемыми до любого визуального размера без потери качества.

Выбирайте популярные и надёжные плагины для загрузки файлов SVG на сайт ВордПресс.

Плагин Safe SVG (Безопасный SVG) для WordPress

Включите загрузку SVG и очистите их, чтобы остановить уязвимости XML / SVG на вашем сайте WordPress. Safe SVG — лучший способ разрешить загрузку SVG в WordPress!

Плагин Безопасный SVG ВордПресс
WordPress плагин Safe SVG

Расширение дает вам возможность разрешить загрузку SVG, убедившись, что файл безопасен (очищен), чтобы предотвратить уязвимости SVG/XML, влияющие на ваш сайт. Это также дает вам возможность предварительно просматривать загруженные SVG в медиатеке во всех представлениях.

Функции плагина:

  • Санитарные SVG-файлы — Не открывайте дыр в безопасности на своем сайте WP, разрешив загрузку файлов без проверки;
  • Просмотр SVG в библиотеке медиафайлов — Включен предварительный просмотр SVG в библиотеке мультимедиа WordPress.
Предварительный просмотр SVG в медиатеке WordPress
Просмотр SVG в библиотеке медиафайлов

У плагина Safe SVG нет никаких настроек, он только включает возможность безопасной загрузки в WordPress SVG и проверяет изображения на вредоносный код при их загрузке. Просто установите его прямо через админку WP, активируйте и будет вам счастье. Загружайте/вставляйте SVG в ваши сообщения и страницы WordPress так же как и изображения PNG, JPG или WebP:

Загрузка SVG изображения в ВордПресс
Вставка изображения SVG в статью

Недостатком является то, что этот плагин позволяет загружать SVG всем пользователям, которые могут писать сообщения на вашем сайте WordPress.

Другой плагин позволяет загружать файлы с расширениями SVG, WebP и ICO в медиатеку вашего сайта WordPress.

Плагин Uploading SVG, WEBP and ICO files

ВордПресс плагин Загрузка файлов SVG, WEBP и ICO позволяет избежать ошибки, связанной с невозможностью загрузки файлов SVG, WebP и ICO:

Безопасная загрузка SVG в WordPress 1
Uploading SVG, WEBP and ICO files для WordPress

Страницы настроек также нет. Просто установите и активируйте его стандартным способом, и он сразу готов к работе. Разработчик на 100% ручается за его работоспособность, отсутствие ошибок и несовместимостей с другими плагинами. Модуль новый, можете почитать о нём на сайте автора плагина.

Далее, продвинутый плагин с настройками.

Чтобы контролировать, кто может загружать файлы, вам необходимо использовать следующий плагин - SVG Support. Он предлагает полную поддержку и настройку добавления файлов SVG в WordPress. Поддержка SVG имеет больше возможностей!!! 

Плагин SVG Support (Поддержка SVG WordPress)

Модуль Поддержка SVG - загрузка SVG файлов в библиотеку и их инлайновый вывод для облегчения стилизации или анимации внутренних элементов SVG с помощью CSS и JS.

Поддержка SVG для сайта WordPress
ВордПресс плагин SVG Support

Безопасно загружайте файлы SVG в свою медиатеку и используйте их как любое другое изображение. Теперь с дополнительной дезинфекцией!

При использовании изображений SVG на вашем сайте WordPress может быть сложно стилизовать элементы в SVG с помощью CSS. Теперь это легко сделать!

Функции плагина:

  • Поддержка SVG для вашей медиатеки;
  • Санировать загрузки SVG;
  • Минимизировать SVG-файлы;
  • Вставьте свой код SVG;
  • Стиль элементов SVG непосредственно с помощью CSS;
  • Анимируйте элементы SVG с помощью CSS и JS;
  • Очень простая страница настроек с инструкциями;
  • Ограничить возможность загрузки SVG только администраторами;
  • Установить собственный целевой класс (можно использовать для внешних элементов начиная с версии 2.4);
  • Чрезвычайно простой в использовании — упрощает сложное использование файлов SVG.

Установите плагин SVG Support стандартным способом. После активации расширения вы можете просто загружать изображения SVG в свою медиатеку, как и любой другой файл.

Как администратор, вы можете перейти на страницу настроек - Настройки - Поддержка SVG и разрешить загрузку файлов SVG только администраторам.

Настройка загрузки SVG-файлов в библиотеку WP
Настройки плагина SVG Support

Если вам нужно загружать только файлы SVG для использования в качестве изображений, вам не нужно включать «Расширенный режим». Если оставить его отключенным, сценарий внешнего интерфейса не будет поставлен в очередь, а ненужные настройки останутся скрытыми.

Для расширенного использования: включите Расширенный режим в разделе Настройки - Поддержка SVG. Сохраните изменения.

Теперь вы можете включить очистку и/или минимизацию ваших загрузок SVG, определить собственный класс CSS для таргетинга и поиграть с некоторыми другими настройками:

Расширенные функции SVG Support WordPress
Дополнительные настройки плагина ВордПресс

После всех настроек не забывайте нажать кнопку Сохранить изменения, чтобы сохранить параметры плагина.

Теперь вы можете создать новый пост или отредактировать существующий. В редакторе сообщений вы загрузите свой файл SVG, как и любой другой файл изображения. Просто добавьте блок изображения в редактор, а затем загрузите файл SVG:

Безопасная загрузка SVG в WordPress
Пример файла SVG в сообщение ВордПресс
На заметку: если Ваше SVG изображение не видно, то возможно оно отображается с нулевой высотой и шириной. Для корректного отображения Вам нужно задать свою высоту и ширину SVG изображению с помощью CSS.

Для преобразования вашего существующего логотипа или любого другого изображения из JPG, PNG в SVG вы можете бесплатно использовать онлайн сервис, например Convertio (https://convertio.co/ru/png-svg/).

В заключение

SVG — отличный выбор для многих ситуаций. Например, они являются идеальным вариантом для логотипов веб-сайтов из-за их масштабируемости. В целом, использование SVG может помочь вам создать более отзывчивый сайт, что всегда хорошо с точки зрения ваших пользователей.

Однако, если вы планируете добавить поддержку SVG в WordPress, вам нужно убедиться, что вы используете подход, обеспечивающий безопасность вашего сайта.

Дискуссии о безопасности SVG в WordPress ведутся уже много лет. Возможная инъекция вредоносного кода затрагивает многие форматы файлов (не только SVG) и, конечно же, плагины. HTML, CSS и Javascript также являются потенциальными кандидатами на взлом. Установка плагинов и тем зарезервирована за администратором, а загрузка мультимедиа обычно разрешена всем авторам.

Поэтому, если статьи пишут несколько авторов, следует установить плагин SVG Support, который может регулировать права авторов при загрузке SVG.


Оставьте комментарий