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

SVG (Scalable Vector Graphics) — это формат векторной графики, который позволяет изображению оставаться четким независимо от его размера. В отличие от традиционных растровых изображений (таких как JPEG или PNG), SVG основан на XML-коде, что делает его гибким и лёгким. SVG активно используется в веб-дизайне для создания логотипов, иконок и других графических элементов, которые должны оставаться чёткими на любых разрешениях. Давайте рассмотрим, как загрузить SVG-файлы в WordPress?

Почему WordPress по умолчанию блокирует загрузку SVG?
Шаг 1: Добавление поддержки SVG через функцию в файле functions.php
Шаг 2: Использование фильтра upload_mimes с проверкой безопасности
Шаг 3: Фильтрация содержимого SVG для повышения безопасности
Шаг 4: Отображения SVG в медиатеке
Шаг 5: Оптимизация SVG-файлов для повышения производительности сайта
Шаг 6: Объединим код в один Класс
Использование сторонних плагинов для загрузки SVG в WordPress!
- Плагин Safe SVG
- Плагин SVG Support
Заключение

Почему WordPress по умолчанию блокирует загрузку SVG?

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

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

Шаг 1: Добавление поддержки SVG через функцию в файле functions.php

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

Откройте файл functions.php вашей активной темы. Это можно сделать через редактор тем в WordPress или через FTP.
Добавьте следующий код:

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

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

Расширенная версия кода с проверкой безопасности

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

function allow_svg_upload($mimes) {
    // Проверка роли пользователя
    if(current_user_can('administrator')) {
        $mimes['svg'] = 'image/svg+xml';
    }
    return $mimes;
}
add_filter('upload_mimes', 'allow_svg_upload');

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

Преимущества метода:

Легкость реализации.
Не требует установки сторонних плагинов.

Недостатки метода:

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

Шаг 2: Использование фильтра upload_mimes с проверкой безопасности

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

Добавьте следующий код в functions.php:

function secure_svg_upload( $file ) {
    $filetype = wp_check_filetype( $file['name'] );
    $ext = $filetype['ext'];
    $type = $filetype['type'];
    $proper_filename = $file['name'];

    if ( $ext === 'svg' && $type === 'image/svg+xml' ) {
        $file_content = file_get_contents( $file['tmp_name'] );
        if ( strpos( $file_content, '<script' ) !== false ) {
            $file['error'] = 'SVG-файлы с содержимым <script> не разрешены.';
        }
    }

    return $file;
}
add_filter( 'wp_check_filetype_and_ext', 'secure_svg_upload' );

Этот код добавляет базовую проверку безопасности, запрещая SVG-файлы, которые содержат <script> теги, и предотвращая потенциальные XSS-атаки.

Преимущества метода:

Дополнительная защита от вредоносных SVG.
Продвинутая проверка на наличие вредоносного кода.

Недостатки метода:

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

Шаг 3: Фильтрация содержимого SVG для повышения безопасности

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

Пример кода для фильтрации содержимого SVG

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

Установка библиотеки SVG Sanitizer: Для работы с библиотекой нужно скачать её с репозитория GitHub или через Composer.
Интеграция с WordPress: После установки библиотеки добавьте следующий код в файл functions.php, чтобы применить фильтрацию при загрузке SVG-файлов:

require_once 'path-to-svg-sanitizer/autoload.php';

use enshrined\svgSanitize\Sanitizer;

function sanitize_svg_on_upload($file) {
    if ($file['type'] == 'image/svg+xml') {
        $sanitizer = new Sanitizer();
        $sanitizer->removeRemoteReferences(true); // Отключает внешние ссылки

        // Получаем содержимое SVG-файла
        $svg_contents = file_get_contents($file['tmp_name']);
        $sanitized_svg = $sanitizer->sanitize($svg_contents);

        if ($sanitized_svg) {
            // Записываем очищенный SVG обратно в файл
            file_put_contents($file['tmp_name'], $sanitized_svg);
        } else {
            $file['error'] = 'SVG-файл содержит опасные элементы и не может быть загружен.';
        }
    }
    return $file;
}
add_filter('wp_handle_upload_prefilter', 'sanitize_svg_on_upload');

Сохраните изменения и попробуйте загрузить SVG.

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

Библиотека позволяет настроить дополнительные параметры безопасности, такие как:

Удаление всех JavaScript-элементов.
Ограничение только на безопасные атрибуты и теги.
Фильтрация ссылок на внешние ресурсы.

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

Преимущества фильтрации:

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

Недостатки фильтрации:

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

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

Шаг 4: Отображения SVG в медиатеке

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

Однако, с помощью фильтров и небольших изменений в коде, можно настроить отображение SVG-файлов как изображения в медиабиблиотеке.

Отобразим превью для SVG изображений

Отображение изображений в медиабиблиотеке WordPress управляется функцией wp_print_media_templates(), которая генерирует HTML-разметку для различных типов медиафайлов. Однако, для SVG-файлов в коде предусмотрено отображение не изображения, а документа. Это происходит потому, что у SVG-файлов нет стандартных размеров (например, medium или full), как у растровых изображений (PNG, JPG).

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

add_filter( 'wp_prepare_attachment_for_js', 'show_svg_in_media_library' );

/**
 * Формирует данные для отображения SVG как изображения в медиабиблиотеке.
 */
function show_svg_in_media_library( $response ) {
    if ( $response['mime'] === 'image/svg+xml' ) {
        // Без вывода названия файла
        $response['sizes'] = [
            'medium' => [
                'url' => $response['url'],
            ],
            'full' => [
                'url' => $response['url'],
            ],
        ];
    }

    return $response;
}

Здесь создаются размеры medium и full для файла SVG, что позволяет WordPress отобразить его в медиабиблиотеке, как обычное изображение. Этот код не включает название файла, что делает интерфейс более чистым и простым.

Ограничение отображения для не Админов

Если вы хотите запретить пользователям, которые не являются администраторами, просматривать SVG-файлы в медиатеке WordPress, можно использовать следующий код:

function restrict_svg_in_media_library($query) {
    if (!current_user_can('administrator')) {
        // Запрещаем отображение SVG-файлов для пользователей, которые не являются администраторами
        $query['exclude'] = get_posts(array(
            'post_type' => 'attachment',
            'meta_query' => array(
                array(
                    'key' => '_wp_attachment_metadata',
                    'value' => 'svg',
                    'compare' => 'LIKE'
                )
            )
        ));
    }
    return $query;
}
add_filter('ajax_query_attachments_args', 'restrict_svg_in_media_library');

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

Шаг 5: Оптимизация SVG-файлов для повышения производительности сайта

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

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

Использование онлайн-инструментов для оптимизации SVG

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

Использование командной строки для оптимизации SVG

Для более опытных пользователей, которые хотят интегрировать процесс оптимизации в рабочий процесс или обрабатывать множество файлов одновременно, можно использовать инструменты командной строки. Одним из самых популярных инструментов является SVGO.

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

Как использовать SVGO:

Установите Node.js и npm на вашем компьютере (если еще не установлены).
Установите SVGO с помощью команды:

npm install -g svgo

После установки вы можете оптимизировать свой SVG-файл с помощью команды:

svgo input.svg

SVGO создаст оптимизированную версию файла, которая будет иметь меньший размер и улучшенную производительность.

Использование плагинов для автоматической оптимизации SVG в WordPress

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

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

Преимущества оптимизации SVG

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

Шаг 6: Объединим код в один Класс

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

class SVG_Upload_Manager {

    public function __construct() {
        // Добавляем MIME-тип для SVG
        add_filter( 'upload_mimes', [ $this, 'add_svg_to_upload_mimes' ] );

        // Разрешаем загрузку SVG только администраторам
        add_filter( 'upload_mimes', [ $this, 'allow_svg_upload' ] );

        // Проверка SVG на наличие скриптов
        add_filter( 'wp_check_filetype_and_ext', [ $this, 'secure_svg_upload' ] );

        // Очищаем SVG перед загрузкой
        add_filter( 'wp_handle_upload_prefilter', [ $this, 'sanitize_svg_on_upload' ] );

        // Отображение SVG в медиабиблиотеке
        add_filter( 'wp_prepare_attachment_for_js', [ $this, 'show_svg_in_media_library' ] );

        // Ограничение отображения SVG для не-администраторов
        add_filter( 'ajax_query_attachments_args', [ $this, 'restrict_svg_in_media_library' ] );
    }

    // Добавление поддержки для загрузки SVG
    public function add_svg_to_upload_mimes( $mimes ) {
        $mimes['svg'] = 'image/svg+xml';
        return $mimes;
    }

    // Разрешение загрузки SVG только администраторам
    public function allow_svg_upload( $mimes ) {
        if ( current_user_can( 'administrator' ) ) {
            $mimes['svg'] = 'image/svg+xml';
        }
        return $mimes;
    }

    // Защита от загрузки SVG с вредоносным содержимым
    public function secure_svg_upload( $file ) {
        $filetype = wp_check_filetype( $file['name'] );
        $ext = $filetype['ext'];
        $type = $filetype['type'];

        if ( $ext === 'svg' && $type === 'image/svg+xml' ) {
            $file_content = file_get_contents( $file['tmp_name'] );
            if ( strpos( $file_content, '<script' ) !== false ) {
                $file['error'] = 'SVG-файлы с содержимым <script> не разрешены.';
            }
        }

        return $file;
    }

    // Санитизация SVG перед загрузкой
    public function sanitize_svg_on_upload( $file ) {
        if ( $file['type'] == 'image/svg+xml' ) {
            require_once 'path-to-svg-sanitizer/autoload.php';
            use enshrined\svgSanitize\Sanitizer;

            $sanitizer = new Sanitizer();
            $sanitizer->removeRemoteReferences( true ); // Отключает внешние ссылки

            // Получаем содержимое SVG-файла
            $svg_contents = file_get_contents( $file['tmp_name'] );
            $sanitized_svg = $sanitizer->sanitize( $svg_contents );

            if ( $sanitized_svg ) {
                // Записываем очищенный SVG обратно в файл
                file_put_contents( $file['tmp_name'], $sanitized_svg );
            } else {
                $file['error'] = 'SVG-файл содержит опасные элементы и не может быть загружен.';
            }
        }
        return $file;
    }

    // Отображение SVG как изображения в медиабиблиотеке
    public function show_svg_in_media_library( $response ) {
        if ( $response['mime'] === 'image/svg+xml' ) {
            // Без вывода названия файла
            $response['sizes'] = [
                'medium' => [
                    'url' => $response['url'],
                ],
                'full' => [
                    'url' => $response['url'],
                ],
            ];
        }

        return $response;
    }

    // Ограничение отображения SVG в медиабиблиотеке для пользователей, не являющихся администраторами
    public function restrict_svg_in_media_library( $query ) {
        if ( ! current_user_can( 'administrator' ) ) {
            // Запрещаем отображение SVG-файлов для пользователей, которые не являются администраторами
            $query['exclude'] = get_posts( array(
                'post_type' => 'attachment',
                'meta_query' => array(
                    array(
                        'key' => '_wp_attachment_metadata',
                        'value' => 'svg',
                        'compare' => 'LIKE'
                    )
                )
            ) );
        }
        return $query;
    }
}

// Создаем экземпляр класса
new SVG_Upload_Manager();

Объяснение кода:

Конструктор класса (__construct): здесь инициализируются все фильтры, которые настраивают различные аспекты загрузки и отображения SVG.
Методы класса:
- add_svg_to_upload_mimes(): добавляет поддержку SVG в список допустимых форматов.
- allow_svg_upload(): разрешает загрузку SVG только администраторам.
- secure_svg_upload(): проверяет SVG-файл на наличие вредоносного кода (например, скриптов).
- sanitize_svg_on_upload(): очищает SVG-файлы перед их загрузкой, удаляя опасные элементы.
- show_svg_in_media_library(): отображает SVG как изображение в медиабиблиотеке.
- restrict_svg_in_media_library(): ограничивает доступ к SVG для пользователей, не являющихся администраторами.

Такой класс объединяет все функциональные блоки, делая код более организованным и расширяемым.

Использование сторонних плагинов для загрузки SVG в WordPress!

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

Плагин Safe SVG

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

Преимущества использования Safe SVG:

Автоматическое очищение SVG от нежелательных скриптов.
Простая активация и настройка без необходимости вносить изменения в код.
Поддержка предпросмотра SVG в медиа-библиотеке.

Пример использования Safe SVG:

Установка плагина: Войдите в административную панель WordPress, выберите «Плагины» → «Добавить новый» и найдите Safe SVG. Нажмите «Установить» и «Активировать».
Настройка: Safe SVG автоматически добавляет поддержку SVG без дополнительных настроек, но при необходимости можно перейти в настройки плагина и активировать дополнительные опции.
Загрузка файла: После активации Safe SVG откройте «Медиафайлы» → «Добавить новый», загрузите SVG-файл и используйте его в постах, страницах или как изображение для виджетов.

Совет: Хотя Safe SVG очищает файлы от большинства потенциально вредоносных элементов, рекомендуется использовать проверенные SVG-файлы.

Плагин SVG Support

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

Особенности SVG Support:

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

Пример использования SVG Support:

Установка: Как и с любым другим плагином, перейдите в раздел «Плагины» в WordPress, найдите SVG Support, установите и активируйте его.
Активация inline SVG: Перейдите в настройки плагина, отметьте опцию «Enable inline SVG», чтобы включить поддержку анимаций и прямого встраивания SVG.
Использование в коде: Вы можете добавлять SVG напрямую в HTML, например, <div class="svg">[SVG Content]</div>, чтобы применять стили и анимацию через CSS или JavaScript.

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

Рекомендация: Перед установкой любого плагина убедитесь, что он регулярно обновляется и имеет хорошие отзывы, чтобы избежать потенциальных уязвимостей.

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

Заключение

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

Александр Сокирка. Автор постов на Genius.Courses

Автор: Александр Сокирка

Занимаюсь веб разработкой с 2007 года. Имею большой опыт в веб-дизайне и разработке сайтов. Являюсь автором YouTube канала Быть Программистом. Основатель бренда Aletheme и автор тем для WordPress на маркетплэйсе Envato. С 2017 года занимаюсь обучением людей желающим стать программистами. Мои обучающие программы можно найти на этом сайте или на Udemy.