Как добавить 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, весь контент, изображения и авторство принадлежит автору

Как перевести плагин WordPress на ваш язык

Вы хотите перевести плагин WordPress на свой язык? Многие плагины WordPress полностью готовы к переводу и могут быть легко переведены кем угодно в мире.

Как установить цели Google Analytics для вашего сайта WordPress

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

Как заблокировать спам рефералов WordPress в Google Analytics

Получаете ли вы много спама-реферера в своей аналитике Google? Спам с реферерами - это способ передать на веб-сайты фальшивую информацию о реферере.

Как настроить автоматическое резервное копирование WordPress с помощью CodeGuard

Хотите создать для своего сайта машину времени? Создание автоматической резервной копии вашего сайта WordPress в облаке - это первый шаг к защите вашего