БЛОГ 2410

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

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

Предлагаем обсудить, чем мы можем вам помочь. Забронируйте 15-минутную консультацию.

Поделиться статьей

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

Легко добавлять файлы SVG в WordPress
Легко добавлять файлы SVG в WordPress Изображение с сайта wpbeginner.com

Что такое SVG?

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

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

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

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

пиксельный
пиксельный Изображение с сайта wpbeginner.com

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

Без потери качества в векторной графике
Без потери качества в векторной графике Изображение с сайта wpbeginner.com

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

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

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

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

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

Ошибка безопасности SVG в WordPress
Ошибка безопасности SVG в WordPress Изображение с сайта wpbeginner.com

Проблемы безопасности, касающиеся 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 Изображение с сайта wpbeginner.com

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

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

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

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

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

Файл SVG, встроенный в сообщение WordPress
Файл SVG, встроенный в сообщение WordPress Изображение с сайта wpbeginner.com

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

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

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

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

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

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

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

Свяжитесь с нами.

Узнайте, чем мы можем быть для вас полезны.

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

Агентство веб разработки.

Услуги программирования и веб разработки по фиксированной цене. Специализация: WordPress, разработка B2B решений и создание кастомных скриптов.

WordPress

Разработка шаблонов, плагинов, интернет магазинов на WooCommerce, создание сайтов

Подробнее

B2B решения

CRM, ERP, внутренние системы, автоматизация, калькуляторы, SaaS и индивидуальные решения

Подробнее

Программирование

Разработка кастомных скриптов, API, интеграции, Zapier, Integromat, автоматизация

Подробнее

Подписка

Безлимитные услуги графического дизайна и веб разработки по фиксированной цене

Подробнее