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 archivos SVG son archivos vectoriales. Esto significa que puedes ampliarlos, agrandarlos o reducirlos sin perder calidad para logotipos, iconos o diseños adaptables.

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

Estilo y animación : puedes manipular archivos SVG mediante CSS o JavaScript. ¿Quieres un efecto de desplazamiento o una animación? Es muy fácil.

Accesibilidad : si se configuran correctamente, los archivos SVG contienen etiquetas de texto y roles accesibles que los lectores de pantalla pueden interpretar, lo que constituye otra sólida razón para utilizarlos.

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'); 

Dónde: Archivo functions.php del tema (¡siempre usa un tema hijo!).

Desventajas: No incluye desinfección por defecto, lo cual es arriesgado a menos que se combine con un programa de desinfección. Además, la carga de archivos está limitada al administrador (aunque esto se puede personalizar).

3. Consideraciones de seguridad

 SVG = XML, que puede contener:

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

Mejores prácticas:

• Utilice complementos como SVG Support, SVG Safe y HappyFiles con saneamiento incorporado.
• Desinfecte el archivo mediante herramientas en línea (por ejemplo, la prueba de desinfección SVG de Darryll Doyle) antes de subirlo.
• 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. 

Si eres creador de contenido, diseñador o propietario de una pequeña empresa, tendrás acceso a tecnología potente sin necesidad de programar. ¡Tu sitio web cargará más rápido, tendrá mejor posicionamiento y lucirá espectacular! ¿Qué esperas? Haz clic aquí y consigue tu copia.