Los archivos SVG (Scalable Vector Graphics) son ideales para mantener la calidad de imágenes en cualquier tamaño. Sin embargo, WordPress no permite su subida por defecto debido a posibles riesgos de seguridad. En este artículo, te mostraré cómo habilitar la carga de SVG en WordPress con un código seguro y eficiente.
¿Por Qué Usar SVG en WordPress?
- Escalabilidad: Los SVG no pierden calidad al cambiar de tamaño.
- Rendimiento: Archivos más livianos que mejoran la velocidad de carga.
- Flexibilidad: Se pueden editar con CSS y JavaScript.
Código para Permitir SVG en WordPress
El siguiente fragmento de código permite subir archivos SVG y corrige problemas de visualización en el administrador:
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
global $wp_version;
if ( $wp_version !== '4.7.1' ) {
return $data;
}
$filetype = wp_check_filetype( $filename, $mimes );
return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];
}, 10, 4 );
function cc_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
function fix_svg() {
echo '<style type="text/css">
.attachment-266x266, .thumbnail img {
width: 100% !important;
height: auto !important;
}
</style>';
}
add_action( 'admin_head', 'fix_svg' );¿Cómo Implementar el Código?
- Ve a Apariencia → Editor de temas en WordPress.
- Abre el archivo functions.php de tu tema hijo.
- Copia y pega el código al final del archivo.
- Guarda los cambios.
Precauciones de Seguridad
Aunque SVG es útil, puede contener código malicioso. Recomiendo:
- Usar plugins de seguridad como SVG Sanitizer.
- Subir SVG solo desde fuentes confiables.
Si quieres ver como yo trabajo mis SVG’s, te puede interesar este artículo.
