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

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

Почему WordPress блокирует SVG

SVG — это XML-файл, внутри которого может находиться JavaScript-код. При загрузке непроверенного SVG возможна XSS-атака, поэтому WordPress разрешает только «безопасные» форматы изображений: JPG, PNG, GIF и WebP.

Способ 1. Разрешить загрузку SVG через functions.php

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

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

Код добавляется в functions.php темы или дочерней темы. После этого SVG можно загружать через медиабиблиотеку.

Способ 2. Исправить отображение SVG в админке

Чтобы SVG корректно отображались в медиабиблиотеке WordPress, добавьте код:

<?php
function fix_svg_display(){
    echo '<style>td.media-icon img[src$=\".svg\"],img[src$=\".svg\"].attachment-post-thumbnail{width:100%!important;height:auto!important;}</style>';
}
add_action('admin_head','fix_svg_display');

Способ 3. Использовать плагин

Самый простой и безопасный вариант — установка готового плагина.

• Safe SVG — очищает SVG от потенциально опасного кода
• SVG Support — добавляет поддержку SVG и inline-режим

После активации плагина SVG загружаются как обычные изображения.

Способ 4. Разрешить SVG только администраторам

Оптимальный вариант с точки зрения безопасности.

<?php
function allow_svg_for_admins($mimes){
    if(current_user_can('administrator')){
        $mimes['svg']='image/svg+xml';
    }
    return $mimes;
}
add_filter('upload_mimes','allow_svg_for_admins');

Как вставлять SVG на сайт

1. Через тег img

SVG вставляется как обычное изображение через медиабиблиотеку или тег <img>. Минус — невозможно управлять цветом и стилями через CSS.

2. Inline SVG

SVG-код вставляется прямо в HTML-разметку, что позволяет управлять цветом, размером и анимацией через CSS.

<svg class=\"icon\">
    <use xlink:href=\"#icon-star\"></use>
</svg>

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

• Загружайте SVG только из проверенных источников
• Не разрешайте SVG для всех пользователей
• Используйте плагины с очисткой SVG-кода

Онлайн-сервисы для очистки SVG: SVGOMG, SVGO.

Итог

Лично я для себя уже давно выбираю самый быстрый и простой способ с помощью плагина. А какой вы используете метод в своих проектах?