Cómo agregar archivos de imagen SVG en WordPress

¿Listo para darle a tu sitio de WordPress una actualización gráfica seria? Imagina un logotipo infinitamente escalable y iconos que se ven nítidos en cualquier dispositivo, sin pixelación ni distorsión. Esta guía te muestra exactamente cómo subir y administrar archivos SVG en WordPress usando WP Media Folder, y está hecha para cualquier persona, incluso si no eres desarrollador.

En este tutorial paso a paso, desglosaremos los beneficios de los archivos SVG, por qué los diseñadores los aman y por qué son fantásticos para el SEO y el rendimiento de la página. Aprenderás múltiples métodos fáciles de seguir para habilitar las cargas de SVG: desde el uso de plugins de confianza hasta ajustes de código simples, además de estrategias inteligentes para mantener tu sitio seguro.

Usaremos WP Media Folder, el potente plugin de gestión de medios de JoomUnited. 

Por qué los SVG son increíbles para gráficos escalables

Escalabilidad – Los SVG son archivos vectoriales. Eso significa que puedes acercarte, ampliar o reducirlos sin perder calidad para logotipos, iconos o diseños responsivos.

Ligero y compatible con SEO – Los archivos SVG suelen ser más pequeños que las imágenes rasterizadas y están basados en texto XML, por lo que los motores de búsqueda pueden leer elementos clave directamente (texto alternativo, títulos, etc.).

Estilo y animación – Puede manipular SVG a través de CSS o JavaScript. ¿Quiere un efecto hover o animación? Fácil.

Accesibilidad – Configurados correctamente, los SVG contienen etiquetas de texto accesibles y roles que los lectores de pantalla pueden interpretar, otra razón sólida para usarlos.

Soluciones para agregar SVG en WordPress

WordPress bloquea SVG por defecto debido a riesgos de seguridad (SVG es XML, que puede incluir código malicioso), Sin embargo, hay tres formas fiables de habilitar el soporte SVG:

1. Usar un plugin

a) WPCode + fragmento de código SVG

• Instala el plugin gratuito WPCode.
• Agrega el fragmento de código 'Permitir subida de archivos SVG' desde su biblioteca y actívalo.
• Por defecto, solo los administradores pueden subir SVG.

b) Plugin de soporte SVG

• Instala 'Soporte SVG' a través de Plugins > Agregar nuevo, actívalo.
• En sus configuraciones, marque "Restringir al administrador" y/o "Habilitar modo avanzado" (renderizado en línea, estilo CSS).
• Sube tu SVG a través de Medios > Añadir nuevo o arrastrar y soltar.

c) Otras opciones:

• SVG Safe por Darrell Doyle, más antiguo pero aún utilizado.
• Soporte SVG sanitiza las subidas para prevenir riesgos XSS/XXE.
• HappyFiles/CatFolders agregan carga de SVG con sanitización y vistas previas.

2. Agregar fragmento de código a functions.php

Puedes usar el siguiente código: 

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

Donde: functions.php del tema (siempre use un tema hijo!).

Inconvenientes: No hay sanitización por defecto—riesgoso a menos que se combine con un sanitizador. Y la carga está limitada al Administrador (puedes personalizar eso).

3. Consideraciones de seguridad

 SVG = XML, que puede contener:

• Ataques XSS (JavaScript).
• Ataques XXE (llamadas a entidades externas).

Mejores prácticas:

• Usar plugins como SVG Support, SVG Safe, HappyFiles con sanitización incorporada.
• Sanear mediante herramientas en línea (p. ej., la prueba de sanitización de SVG de Darryll Doyle) antes de subir.
• Restringir subidas de SVG solo a administradores o usuarios de confianza.

WP Media Folder y por qué es importante para SVGs en WordPress

WP Media Folder es un potente gestor de bibliotecas multimedia

- Estructura de carpeta/subcarpeta

-Filtros avanzados, ordenación, arrastrar y soltar

 - Renombrar, añadir marca de agua, reemplazar en masa, previsualizar, descargar

- Compatible con muchas herramientas como Page Builders, WooCommerce y WPML.

Aunque WP Media Folder en sí mismo no permite el uso de archivos SVG, nos permitirá organizar, mantener y también gestionar cualquier tipo de archivo, incluidos los archivos SVG.

Conclusión: Eleve su sitio con SVG y WP Media Folder

Deja de luchar con carpetas de medios desordenadas y archivos de imagen no optimizados. En su lugar, desbloquea todo el potencial de los SVG, gráficos ligeros, buscables y adaptables, con las herramientas de organización intuitivas de WP Media Folder. 

Ya seas un creador de contenido, diseñador o propietario de un pequeño negocio, pone una tecnología potente en tus manos sin necesidad de código. Tu sitio se cargará más rápido, se posicionará más alto y lucirá impresionante. ¿Qué estás esperando? Ve aquí y obtén tu propia copia.