Включить поддержку SVG в WordPress

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

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

Примечание. Если вы используете WP Engine, мы изначально поддерживаем сжатие GZIP для файлов SVG.

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

Что такое SVG?

Файл SVG — это тип векторного изображения. Векторные файлы составлены иначе, чем более распространенные типы файлов изображений. Например, JPG состоит из тысяч пикселей. С файлом SVG, с другой стороны, это не так.

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

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

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

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

Кроме того, файлы SVG, как правило, значительно меньше других типов изображений. Это означает, что ваш сайт не будет перегружен графикой. Более того, файлы SVG индексируются Google уже довольно давно. Это может быть настоящим благом для поисковой оптимизации вашего сайта (SEO).

Как загрузить SVG в WordPress

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

Способ 1: использовать плагин

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

Шаг 1: Загрузите плагин

Во-первых, вам нужно скачать и установить плагин SVG. Мы рекомендуем поддержку SVG:

После того, как вы установили и активировали плагин, у вас появится новый пункт меню на панели инструментов WordPress в разделе «Настройки» > «Поддержка SVG» . Там вы получите инструкции о том, как стилизовать SVG-файлы для вашего веб-сайта:

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

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

Шаг 2. Включите поддержку GZip файлов SVG на вашем сервере

То, как вы подойдете к этому шагу, будет зависеть от настроек вашего веб-хостинга и сервера. Например, здесь, в WP Engine, GZip уже включен для определенного списка типов файлов. При этом «image/svg+xml» не является одним из них.

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

Шаг 3. Убедитесь, что плагин правильно защищает файлы

Один из недостатков использования файлов SVG и основная причина, по которой этот тип файлов еще не включен в ядро ​​WordPress, связан с проблемами безопасности. Поскольку файлы SVG основаны на XML, они, помимо прочих рисков, уязвимы для атак с использованием внешних объектов.

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

Плагин поддержки SVG не включает автоматическую очистку, но есть другие плагины, которые это делают. Безопасный SVG — один из них:

Кроме того, вы также можете установить собственное дезинфицирующее средство и использовать его независимо. Создатель Safe SVG предоставил дезинфицирующий код плагина на GitHub, чтобы каждый мог его использовать.

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

Способ 2: включить загрузку файлов SVG вручную

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

Шаг 1. Отредактируйте файл Functions.php вашего сайта

Для начала вам нужно отредактировать файл functions.php вашего веб-сайта. Для этого вы можете перейти в «Внешний вид»> «Редактировать темы» на панели инструментов и выбрать файл functions.php :

Кроме того, вы можете получить доступ к файлам своего сайта с помощью приложения протокола передачи файлов (FTP), такого как FileZilla.

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

Шаг 2. Добавьте фрагмент кода

Затем вам нужно добавить следующий фрагмент кода в файл functions.php :

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

global $wp_version;
if ( $wp_version !== '4.7.1' ) {
return $data;
}

$filetype = wp_check_filetype( $filename, $mimes );

return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];

}, 10, 4 );

function cc_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

function fix_svg() {
echo '<style type="text/css">
.attachment-266x266, .thumbnail img {
width: 100% !important;
height: auto !important;
}
</style>';
}
add_action( 'admin_head', 'fix_svg' );

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

Шаг 3: Безопасный доступ и ограничение разрешений на загрузку SVG

Как мы упоминали ранее, включение файлов SVG сопряжено с определенными рисками. Чтобы обеспечить безопасность вашего сайта, вы можете установить разрешения на загрузку для SVG, создав пользовательские роли пользователей. Для этого вы можете использовать плагин, такой как User Role Editor или WPFront User Role Editor.

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

Оставайтесь в безопасности с движком WP

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

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