Как загрузить SVG в WordPress: 2 способа

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

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

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

Для начала давайте познакомимся с SVG и его работой.

Но прежде чем мы начнем, если вы никогда не устанавливали WordPress, узнайте Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге 

Тогда вернемся к тому, почему мы здесь.

Что такое СВГ?

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

В январе 2022, 42% всех веб-сайтов по всему миру используйте SVG. Этот процент увеличился с января 2021 года, когда только 29,4% веб-сайтов использовали его. Подобно форматам PNG и JPG, SVG популярен среди веб-сайтов с высоким трафиком, таких как Google, Wikipedia и YouTube.

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

Вот список браузеров которые поддерживают формат файла SVG:

навигатор	Частичная поддержка	Полная поддержка
Bord	–	Версия 12-18, 79-96, 97
Fire Fox	Версия 2	Версии 3-94, 95, 96-97
Фаерфокс для Android	–	Версия 95
Chrome	–	Версии 4-96, 97, 98-100
Chrome для Android	–	Версия 96
Safari	Версия 3.1	Версия 3.2-15.1, 15.2, ТП
Опера	–	Версии 10-81, 82
Мини Опера	–	Все версии
Opera Mobile	–	Выпуск 12-12.1, 64
Сафари на iOS	–	Выпуск 3.2-15.1, 15.2
Android-браузер	Версия 3-4.3	Выпуск 4.4-4.4.4, 96
UC-браузер для Android	–	Версия 12.12
Интернет-магазин Samsung	–	Выпуск 4-14.0, 15.0
QQ Browser	–	Версия 10.4
Baidu Browser	–	Версия 7.12
Браузер KaiOS	–	Версия 2.5

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

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

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

Поддерживает ли WordPress SVG?

По умолчанию в WordPress нет поддержки SVG из-за связанных с этим рисков безопасности — позже мы более подробно рассмотрим проблемы безопасности, связанные с SVG.

Вот сообщение об ошибке, которое появляется при загрузке SVG-графики на веб-сайт WordPress:

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

Зачем использовать WordPress SVG?

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

• Масштабируемость: Поскольку SVG — это формат векторного изображения, файлы SVG сохраняют одинаковое качество при любом разрешении экрана. Это преимущество также присутствует после их увеличения, поэтому многие люди используют этот масштабируемый формат изображения для значков и логотипов.
• Меньший размер файла : файлы SVG позволяют легко повысить производительность веб-сайта, поскольку они занимают меньше места в веб-хранилище и загружаются намного быстрее, чем другие изображения.
• SEO Friendly : Google индексирует файлы SVG, позволяя им появляться в поиске изображений Google и улучшая поиск. SEO. Что касается других типов изображений, вы ограничены оптимизацией их атрибутов alt.
• SVG на основе кода редактируются с помощью текстового редактора или программного обеспечения для редактирования векторной графики. Вы можете оптимизировать файлы SVG для веб-сайтов или даже добавить анимацию, чтобы сделать графику интерактивной.

SVG на WordPress и безопасность

Поскольку SVG по сути является текстовым XML-файлом, в нем есть уязвимые места, которые не затрагивают другие форматы изображений. Поэтому люди могут легко взломать его с помощью вредоносного кода для запуска атак межсайтового скриптинга (XSS) и XML External Entity (XXE) на вашу систему.

По этой причине вы должны быть осторожны при обработке файлов SVG и добавлении их в WordPress.

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

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

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

Как загрузить файлы SVG в WordPress двумя безопасными способами

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

Используйте плагин WordPress

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

Вот шаги для настройки поддержки SVG:

1. IУстановить плагин и активируйте его.

2. Доступ к Настройки -> поддержка SVG с панели управления WordPress.

3. Установите флажок рядом с вариантом Ограничить для администраторов чтобы ограничить права загрузки. Сделайте то же самое для варианта Активировать расширенный режим если вам нужен доступ к расширенным функциям, таким как встроенный рендеринг SVG и стили CSS.

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

Вручную добавьте поддержку WordPress SVG

Этот метод включает в себя редактирование файла functions.php вашего сайта WordPress. Поэтому мы настоятельно рекомендуем вам выполнить эти шаги, если вы знакомы с PHP и полностью понимаете проблему безопасности SVG.

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

Следующие шаги объяснят, как включить SVG в WordPress вручную с помощью FTP-клиента, такого как FileZilla.

1. Перейдите в каталог файлов вашего сайта на вашем хосте
2. Доступ к public_html -> WP-включает в себя. Прокрутите вниз, пока не найти functions.php.

3. Щелкните этот файл правой кнопкой мыши и выберите «Просмотр/редактирование», чтобы открыть его и вставить в него следующий фрагмент кода:

function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');

4. Сохраните изменения и попробуйте загрузить новый файл SVG. Если процесс прошел успешно, ваша медиатека должна принять загрузку файла.

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

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

Другие рекомендуемые ресурсы

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

• Как создать простой плагин WordPress
• Как создать простой плагин Gutenberg Block для WordPress
• Как установить домашнюю страницу в WordPress
• Как понять панель инструментов WordPress
• Как создать простой плагин WordPress

Заключение

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

Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

В то же время, поделитесь этой статьей в разных социальных сетях.   

...