Как добавить SVG в WordPress (с 2 простыми решениями)

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

^

Что такое SVG?

SVG или Scalable Vector Graphics – это формат файла, который определяет векторную графику с использованием языка разметки XML. Основное преимущество SVG заключается в том, что он позволяет увеличивать изображения без потери качества и без пикселизации.

Как работает SVG?

Масштабируемая векторная графика (SVG) – это технология, которая отображает двухмерные чертежи с использованием XML. Они отличаются от обычно используемых форматов изображений, таких как PNG, GIF или JPEG.

Если вы возьмете файл изображения в формате png / jpeg и увеличите масштаб, то вы заметите, что изображение начнет размываться и станет пиксельным.

^

Векторная графика не использует пиксели. Вместо этого они используют двухмерную карту, которая определяет графику, которую вы просматриваете. При увеличении изображение не пикселируется.

^

Это позволяет увеличивать векторную графику без потери качества. Самое главное, изображения SVG могут быть намного меньше по размеру файлов, чем JPEG или PNG.

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

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

Если вы загрузите изображение SVG в WordPress, то увидите следующее сообщение об ошибке:

Извините, этот тип файла не разрешен по соображениям безопасности.

^

Вопросы безопасности, касающиеся SVG в WordPress

Файлы SVG содержат код на языке разметки XML, который похож на HTML. Ваш браузер или программное обеспечение для редактирования SVG анализирует язык разметки XML, чтобы отобразить вывод на экране.

Однако это открывает ваш сайт для возможных уязвимостей XML. Его можно использовать для получения несанкционированного доступа к пользовательским данным, инициирования атак методом перебора или межсайтовых сценариев.

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

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

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

При этом давайте посмотрим, как легко и безопасно использовать SVG-файлы в WordPress.

Способ 1. Загрузка файлов SVG в WordPress с помощью поддержки SVG

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

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

После активации необходимо зайти на страницу «Настройки» на странице поддержки SVG, чтобы настроить параметры плагина.

^

На странице настроек необходимо установить флажок «Ограничить администраторов?». Это позволит только администратору сайта загружать файлы SVG в WordPress.

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

Не забудьте нажать кнопку «Сохранить изменения», чтобы сохранить настройки.

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

Теперь вы сможете загружать и вставлять SVG-файл в WordPress.

^

Способ 2. Загрузка файлов SVG в WordPress с помощью Safe SVG

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

Первое, что вам нужно сделать, это установить и активировать плагин Safe SVG. Для получения более подробной информации, смотрите наше пошаговое руководство по установке плагина WordPress.

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

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

Чтобы контролировать, кто может загружать файлы, вам необходимо приобрести премиум-версию плагина.

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