Cómo subir SVG en WordPress 4.9.8

Question

Cómo subir SVG en WordPress 4.9.8

12 sept 2018, 12:05:17

Vistas: 17.7K

Votos: 7

Intenté subir SVG después de instalar diferentes plugins. Incluso agregué un filtro al archivo 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 );

Pero al intentar subir un SVG sigue apareciendo el siguiente error. Error al subir SVG

Sarath

183

subidas svg

Comentarios

Mira la extensión del archivo. Estás subiendo un archivo XML, no un SVG.

Jacob Peattie

12 sept 2018 12:28:09

@JacobPeattie SVG es un formato de archivo basado en XML y este tipo MIME es correcto en muchos contextos. Quizás te refieres a la solución de Syed y, en lo que respecta a WordPress, image/svg sin el +xml es efectivamente la respuesta.

JDandChips

9 sept 2020 11:32:56

Si llegas aquí y puedes subir un SVG a WordPress pero no se muestra, verifica el ancho y alto, el mío por defecto era 1x1

rob

8 dic 2020 19:24:00

Todas las respuestas a la pregunta

@rana-umer tu código es correcto, solo elimina el "+xml" después de 'image/svg'.

//agregar SVG a los tipos de archivo permitidos para subir
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 ago 2019 11:37:44

Comentarios

eliminar el "+xml" hizo que funcione, gracias

Pons

23 sept 2019 11:53:08

Esta es la mejor respuesta para aquellos que buscan hacerlo sin el uso del plugin.

akshay saxena

4 jun 2021 09:00:12

Comentarios

Intenté subir el archivo SVG con el plugin sugerido. Funcionó bien como se esperaba. Y la miniatura también es visible. Muchas gracias por sugerir esto. @Tedinoz

Sarath

14 sept 2018 09:15:38

En realidad hay más que solo esta respuesta - el SVG tiene que estar formateado correctamente o simplemente no se subirá, independientemente del código o plugin que uses: https://kinsta.com/blog/wordpress-svg/#attachment_10218

Recién ahora veo que Darrell Doyle escribió el sanitizador para SVGs, así que imagino que está integrado en su plugin. Pero para aquellos que quieren hacerlo sin un plugin, es importante entender el proceso de sanitización y qué se requiere.

Tony Djukic

7 may 2020 02:45:51

//agregar SVG a los tipos de archivos permitidos para subir
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 mar 2019 19:19:30

Después de agregar la acción upload_mimes, si alguien sigue teniendo problemas, entonces añade esto en tu archivo wp-config.php

define( 'ALLOW_UNFILTERED_UPLOADS', true );

Suraj Rathod

64

26 jul 2019 10:03:17

La primera función verifica la versión de WordPress y añade soporte para versiones inferiores a la 4.8. La segunda función registra el tipo de archivo MIME (SVG) y la última corrige las miniaturas en la biblioteca multimedia.

/**
 * Añadir soporte para 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 may 2020 00:28:41

Comentarios

Gracias, hermano. Esto funciona... solo elimina ese ".attachment-266x266," que no está relacionado

Sagive

28 ene 2022 09:10:39

Añade estos hooks, los he probado en WordPress 5.3 y funcionan:

// Permitir 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 sept 2020 18:38:11

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

Esta pregunta me dejó rascándome la cabeza. Sí, ¿cómo es que WordPress no soporta esto de forma nativa? Y luego lo descubrí.

Preguntaste cómo subir SVG en WordPress 4.9.8 (la versión actual al momento de escribir esto). Mencionaste que "intentaste subirlos después de instalar diferentes plugins". No mencionas cuáles plugins, ni si están relacionados con SVG.

Según entiendo la situación, la respuesta más segura y apropiada en este momento es usar SVG Safe (un plugin creado específicamente para este propósito) por Darrell Doyle. Si este plugin no funciona para ti, entonces sugiero que tienes un conflicto en otro lugar, y deberías seguir los procedimientos habituales para resolverlo. Personalmente, si este plugin no funcionara para mí, abandonaría la idea de subir SVGs.

Si aún no lo has hecho, puedo sugerirte leer "Subidas de SVG en WordPress - la incómoda verdad" por Bjorn Johansen y/o "Cómo Habilitar Soporte SVG en WordPress de Forma Segura - 2 Clics Simples" por Brian Jackson. Al menos deberías saber en lo que te estás metiendo.