Permitir archivos SVG en WordPress

Aunque WordPress no admite SVG de forma nativa en todos los casos, podemos superar esta limitación mediante la adición de código personalizado en el archivo functions.php. En este artículo, exploraremos cómo hacerlo de manera sencilla y segura.

El formato SVG (Scalable Vector Graphics) es popular debido a su capacidad para escalar sin pérdida de calidad, lo que lo convierte en una opción ideal para gráficos y logotipos. Integrar SVG en WordPress puede mejorar significativamente la estética y la interactividad de un sitio, pero por defecto, WordPress no permite la carga de archivos SVG en todas las áreas.

Pasos para habilitar SVG en WordPress:

1. Copia de Seguridad: Antes de realizar cambios en el archivo functions.php, realiza una copia de seguridad para evitar posibles problemas.
2. Acceso al archivo functions.php: Abre tu panel de administración de WordPress y navega hasta «Apariencia > Editor de archivos de temas». Selecciona el archivo functions.php de tu tema activo para editarlo.
3. Añadir el Código de Soporte SVG: Inserta el siguiente código al final del archivo functions.php y guarda los cambios.php

/*
 * Permitir la carga de archivos SVG
 */
function allow_svg_upload( $mimes ) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
}
add_filter( 'upload_mimes', 'allow_svg_upload' );

Esta función filtra los tipos de archivos permitidos durante la carga de medios, agregando el tipo de archivo SVG a la lista permitida.

/*
 * Corregir la visualización de miniaturas SVG en el área de administración
 */
function fix_svg_thumb_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_thumb_display' );

Esta función añade un estilo en línea al encabezado de la administración de WordPress que ajusta la presentación de miniaturas SVG. Esto asegura que las miniaturas se muestren correctamente, ocupando el 100% del ancho disponible y ajustando automáticamente la altura.

Ya puedes probar a subir y utilizar archivos SVG en tu WordPress. Ahora, deberías poder utilizar archivos SVG como lo harías con cualquier otro tipo de imagen.