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

/

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

Легко добавлять файлы SVG в WordPress

Что такое SVG?

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

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

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

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

пиксельный

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

Без потери качества в векторной графике

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

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

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

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

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

Ошибка безопасности 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

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

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

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

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

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

Файл SVG, встроенный в сообщение WordPress

Метод 2. Загрузка файлов SVG в WordPress с помощью Safe SVG

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

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

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

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

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

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

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как исправить ошибки файла Pluggable.php в WordPress

Вы видите ошибку файла pluggable.php на своем сайте WordPress? Иногда, когда вы добавляете фрагмент кода на свой сайт или активируете новый плагин, вы можете

Полное руководство по использованию MailChimp и WordPress

Вы хотите создать список рассылки? Хотите рассылать обновления по электронной почте своим подписчикам, когда публикуете новый пост в блоге? MailChimp

Как использовать ретаргетинг файлов cookie в WordPress для отображения пользовательских сообщений на сайте

Вы хотите использовать ретаргетинг файлов cookie в WordPress? Ретаргетинг файлов cookie - это секретный инструмент, уже используемый на многих самых популярных

Как добавить анимированные GIF в WordPress

Вы хотите добавлять анимированные GIF-файлы в сообщения блога WordPress? Иногда, когда вы добавляете анимированный GIF в WordPress, он теряет анимацию и отображается