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

Question

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

12 сент. 2018 г., 12:05:17

Просмотры: 17.7K

Голосов: 7

Я пытался загрузить SVG после установки различных плагинов. Также добавил фильтр в файл functions.php.

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

Но при загрузке SVG всё равно появляется следующая ошибка. Ошибка загрузки SVG

Sarath

183

загрузки svg

Комментарии

Посмотрите на расширение файла. Вы загружаете XML-файл, а не SVG.

Jacob Peattie

12 сент. 2018 г. 12:28:09

@JacobPeattie SVG — это файловый формат на основе XML, и этот MIME-тип корректен во многих контекстах. Возможно, вы имеете в виду решение Syed, и в случае с WordPress действительно image/svg без +xml является правильным ответом.

JDandChips

9 сент. 2020 г. 11:32:56

Если вы попали сюда и можете загрузить SVG в WordPress, но он не отображается, проверьте ширину и высоту — у меня по умолчанию стоит 1x1.

rob

8 дек. 2020 г. 19:24:00

Все ответы на вопрос

@rana-umer ваш код правильный, просто удалите "+xml" после 'image/svg'.

//добавляем SVG в разрешенные типы файлов для загрузки
function add_file_types_to_uploads($file_types){

     $new_filetypes = array();
     $new_filetypes['svg'] = 'image/svg';
     $file_types = array_merge($file_types, $new_filetypes );

     return $file_types; 
} 
add_action('upload_mimes', 'add_file_types_to_uploads');

Syed Figar Ali Jaffri

239

20 авг. 2019 г. 11:37:44

Комментарии

удаление "+xml" помогло, спасибо

Pons

23 сент. 2019 г. 11:53:08

Это лучший ответ для тех, кто хочет обойтись без использования плагина.

akshay saxena

4 июн. 2021 г. 09:00:12

Комментарии

Я попробовал загрузить SVG-файл с помощью предложенного плагина. Все сработало, как и ожидалось. И миниатюра тоже отображается. Большое спасибо за рекомендацию. @Tedinoz

Sarath

14 сент. 2018 г. 09:15:38

На самом деле, здесь есть нюансы помимо этого ответа - SVG должен быть правильно отформатирован, иначе он просто не загрузится, независимо от того, какой код или плагин вы используете: https://kinsta.com/blog/wordpress-svg/#attachment_10218

Только сейчас увидел, что Даррелл Дойл написал санітайзер для SVG, так что, думаю, он интегрирован в его плагин. Но для тех, кто хочет обойтись без плагина, важно понимать процесс санитизации и требования к нему.

Tony Djukic

7 мая 2020 г. 02:45:51

//добавляем SVG в разрешенные типы файлов для загрузки
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_action('upload_mimes', 'add_file_types_to_uploads');

Rana umer

51

19 мар. 2019 г. 19:19:30

После добавления действия upload_mimes, если у кого-то всё ещё возникают проблемы, добавьте это в ваш файл wp-config.php

define( 'ALLOW_UNFILTERED_UPLOADS', true );

Suraj Rathod

64

26 июл. 2019 г. 10:03:17

Первая функция проверяет версию WordPress и добавляет поддержку для версий ниже 4.8. Вторая функция регистрирует MIME-тип файла (SVG), а последняя исправляет отображение миниатюр в медиатеке.

/**
 * Добавляет поддержку SVG
 *
 */
add_filter( 'wp_check_filetype_and_ext', function( $data, $file, $filename, $mimes) {
      global $wp_version;
      if( $wp_version == '4.7' || ( (float) $wp_version < 4.7 ) ) {
      return $data;
    }
    $filetype = wp_check_filetype( $filename, $mimes );
      return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
    ];
}, 10, 4 );

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

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

Nuno Sarmento

585

7 мая 2020 г. 00:28:41

Комментарии

Спасибо, мужик. Это работает... просто удали этот ".attachment-266x266,", он здесь не нужен

Sagive

28 янв. 2022 г. 09:10:39

Добавьте эти хуки, я тестировал на WP 5.3, они работают:

// Разрешить SVG
add_filter('wp_check_filetype_and_ext', function ($data, $file, $filename, $mimes) {

    if (!$data['type']) {
        $wp_filetype = wp_check_filetype($filename, $mimes);
        $ext = $wp_filetype['ext'];
        $type = $wp_filetype['type'];
        $proper_filename = $filename;
        if ($type && 0 === strpos($type, 'image/') && $ext !== 'svg') {
            $ext = $type = false;
        }
        $data['ext'] = $ext;
        $data['type'] = $type;
        $data['proper_filename'] = $proper_filename;
    }
    return $data;


}, 10, 4);


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


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

Mr.Hosseini

141

13 сент. 2020 г. 18:38:11

Tedinoz 448 · Accepted Answer · 2018-09-13T04:07:01Z

Этот вопрос заставил меня задуматься. Да, почему WordPress не поддерживает это изначально? И тогда я узнал ответ.

Вы спросили, как загрузить SVG в WordPress 4.9.8 (актуальная версия на момент написания). Вы упомянули, что «пытались загрузить после установки различных плагинов». Вы не указали, какие именно плагины и связаны ли они с SVG.

Насколько я понимаю ситуацию, самое безопасное и подходящее решение на данный момент — использовать плагин SVF Safe (разработанный специально для этой цели) от Darrell Doyle. Если этот плагин не работает у вас, значит, у вас конфликт с чем-то другим, и вам следует применить стандартные методы для его устранения. Лично я бы отказался от идеи загрузки SVG, если этот плагин не сработал.

Если вы еще не читали, рекомендую ознакомиться со статьями «SVG Uploads in WordPress — неудобная правда» от Bjorn Johansen и/или «Как безопасно включить поддержку SVG в WordPress — 2 простых шага» от Brian Jackson. По крайней мере, вы будете знать, во что ввязываетесь.