Cómo activar la compatibilidad con SVG en WordPress (mediante plugin y código)

¿Quieres que tu sitio web se vea bien en cualquier dispositivo?

Los SVG son la solución. Mantienen las imágenes claras en todas las pantallas, desde teléfonos a grandes monitores. Pero WordPress bloquea las subidas de SVG por defecto. Esto es frustrante. ¿Cómo puedes utilizar SVG sin poner en riesgo la seguridad de tu sitio?

Más pequeños que los JPEG o los PNG, los SVG hacen que tu sitio se cargue más rápido, ayudando al SEO. Puedes editar los SVG con código: idealpara animaciones, logotipos o iconos. Sin embargo, los SVG pueden ocultar código dañino, lo que supone riesgos para la seguridad. Por eso WordPress los bloquea por defecto.

Esta guía te muestra cómo activar la compatibilidad con SVG en WordPress de forma segura. ¿Prefieres utilizar plugins o añadir código tú mismo? No te preocupes. Exploraremos métodos como el plugin Safe SVG y fragmentos de código manual, destacando los pasos clave de seguridad.

Comprender los archivos SVG

SVG significa Gráficos Vectoriales Escalables. A diferencia de los JPEG o los PNG, que están hechos de píxeles, los SVG son imágenes basadas en vectores. Utilizan fórmulas matemáticas para dibujar formas y líneas. Esto significa que se mantienen nítidas en cualquier tamaño de imagen, desdepequeños iconos a grandes pancartas.

– Un ejemplo del logotipo de Cloudways en formato de imagen SVG y PNG

Ventajas de utilizar archivos SVG

• Cambia el tamaño de los SVG libremente; se mantienen nítidos y claros.
• Los SVG suelen ser más ligeros que otros formatos de imagen, lo que ayuda a que tu sitio se cargue más rápido.
• Como se basan en código, puedes editar SVG directamente o añadir animaciones utilizando CSS y JavaScript.
• El texto de los SVG puede ser leído por los motores de búsqueda y los lectores de pantalla.

Comparar JPG, PNG y SVG

He aquí una rápida comparación que destaca las principales diferencias entre los formatos de imagen JPG, PNG y SVG:

Función	JPG (JPEG)	PNG	SVG
Tipo de imagen	Trama (basada en píxeles)	Trama (basada en píxeles)	Vectorial (gráficos escalables)
Lo mejor para	Fotografías e imágenes complejas	Imágenes que requieran transparencia	Logotipos, iconos, ilustraciones
Escalabilidad	Pierde calidad al ampliar	Pierde calidad al ampliar	Infinitamente escalable sin pérdida de calidad
Apoya la transparencia	❌	✔	✔
Tamaño del archivo	Más pequeño debido a la compresión	Más grande que JPG (compresión sin pérdidas)	Muy pequeño para gráficos sencillos

 

¿Por qué utilizar SVG en WordPress?

Los SVG son perfectamente escalables, por lo que tus imágenes se mantienen nítidas y claras en cualquier tamaño. Tanto si se ven en una pequeña pantalla de smartphone como en un gran monitor de escritorio, los gráficos SVG siempre se ven nítidos. Esto significa que tus logotipos, iconos e ilustraciones mantendrán una alta calidad.

Como los archivos SVG son ligeros, ayudan a que tu sitio web se cargue más rápido, mejorando la experiencia del usuario. Los sitios que cargan más rápido mantienen a los visitantes interesados y reducen las tasas de rebote. Además, los SVG pueden ser leídos por los motores de búsqueda, por lo que cualquier texto que contengan puede mejorar la visibilidad de tu sitio.

Precauciones de seguridad críticas

Como ya se ha mencionado, los archivos SVG pueden contener código malicioso porque se basan en XML. Los piratas informáticos pueden incrustar scripts, dando lugar a ataques de secuencias de comandos entre sitios (XSS). Esto puede comprometer la seguridad de tu sitio y poner en peligro tanto tus datos como los de tus visitantes.

Para mitigar los riesgos, limpia siempre los archivos SVG antes de subirlos a WordPress. Utiliza plugins de confianza que limpien el código SVG automáticamente. Sube sólo archivos SVG de fuentes fiables o créalos tú mismo. Esto ayuda a evitar problemas de seguridad y mantiene tu sitio seguro.

Activar la compatibilidad con SVG en WordPress

Para utilizar archivos SVG en tu sitio WordPress de forma segura, puedes habilitar la compatibilidad mediante plugins o añadiendo código manualmente. Utilizar un plugin es el método recomendado porque es fácil e incluye funciones de seguridad.

Método 1: Activar la compatibilidad con SVG mediante plugins

Aquí tienes dos plugins populares para activar la compatibilidad con SVG en WordPress:

Opción A: Plugin SVG seguro

El plugin Safe SVG te permite subir archivos SVG de forma segura, desinfectándolos para eliminar cualquier código malicioso. A continuación te explicamos cómo utilizarlo:

Paso 1: Instala el plugin Safe SVG

• En tu panel de WordPress, ve a Plugins → Añadir nuevo.
• En la barra de búsqueda, escribe«Safe SVG«.
• Busca el plugin y haz clic en Instalar ahora.
• Tras la instalación, haz clic en Activar.

– Instalar y activar el plugin Safe SVG

Paso 2: Subir archivos SVG

• Ve a Medios → Añadir nuevo archivo multimedia.
• Sube tus archivos SVG como harías con cualquier otra imagen.
• Inserta los SVG en tus entradas o páginas.

– Subir archivos SVG en WordPress

Opción B: Plugin de soporte SVG

El complemento SVG Support no sólo permite subir archivos SVG, sino que también te permite alinear SVG, lo que facilita su estilización con CSS. A continuación te explicamos cómo utilizarlo:

Paso 1: Instala el plugin de soporte SVG

• En tu panel de WordPress, ve a Plugins → Añadir nuevo.
• En la barra de búsqueda, escribe«Soporte SVG«.
• Busca el plugin y haz clic en Instalar ahora.
• Tras la instalación, haz clic en Activar.

– Instalar y activar el plugin SVG Support

Paso 2: Configurar el Plugin

• Ve a Configuración → Soporte SVG.
  • Restringir subidas de SVG a: Permite que sólo los Administradores suban archivos SVG.
  • Cargar CSS Frontend: Activa CSS para una mejor visualización de SVG en el sitio web.
  • No desinfectar para estos roles: Los archivos SVG subidos por Administradores y Editores omiten las comprobaciones de seguridad.
  • Minificar SVG: Reduce automáticamente el tamaño del archivo SVG al subirlo.
  • Borrar Datos del Plugin: Borra todos los datos del plugin al desinstalarlo.
  • Activa el Modo Avanzado: Activa funciones adicionales para los SVG, como la renderización en línea.

– Configurar el plugin SVG Support

Paso 3: Subir archivos SVG

• Ve a Medios → Añadir nuevo archivo multimedia.
• Sube tus archivos SVG como harías con cualquier otra imagen.
• Inserta los SVG en tus entradas o páginas.

– Subir archivos SVG en WordPress

Método 2: Activar manualmente la compatibilidad con SVG mediante código

⚠️ Advertencia: Este método carece de sanitización integrada. Utilízalo sólo si confías en las fuentes SVG o combínalas con una herramienta de sanitización.

Paso 1: Edita el archivo functions.php Archivo

• Ve a Apariencia → Editor de temas → functions.php.

– Editar el archivo functions.php en WordPress

• Añade este fragmento de código:

// Permitir cargas SVG

function enable_svg_upload($mimes) {

$mimes['svg'] = 'image/svg+xml';

devuelve $mimes;

}

add_filter('upload_mimes', 'enable_svg_upload');

// Arreglar la visualización de SVG en la Mediateca

function fix_svg_display() {

echo '<estilo>

.attachment-266x266, .thumbnail img {

anchura: 100% !importante;

altura: auto !importante;

}

</style>';

}

add_action('admin_head', 'fix_svg_display');

• Haz clic en Actualizar archivo.

Paso 2: Restringir los permisos de subida (Opcional)

• Modifica el código para limitar las subidas de SVG a los administradores:

function limitar_svg_cargar_a_administradores( $mimes ) {

// Comprueba si el usuario actual es un administrador

if ( current_user_can( 'administrador' ) ) {

// Permitir subir SVG a los administradores

$mimes['svg'] = 'image/svg+xml';

} else {

// Asegúrate de que la carga de SVG está desactivada para otros roles

unset( $mimes['svg'] );

}

devuelve $mimes;

}

add_filter( 'upload_mimes', 'limit_svg_upload_to_admins' );

• Haz clic en Actualizar archivo.

Optimizar archivos SVG para WordPress

Activar la compatibilidad con SVG es un buen comienzo, pero optimizar tus archivos SVG garantiza que se carguen más rápido, funcionen sin problemas y se mantengan seguros. A continuación te explicamos cómo optimizar los SVG para tu sitio de WordPress:

1. Minificar archivo SVG

Los archivos SVG pueden tener código adicional, metadatos o capas ocultas del software de diseño. Esto los hace más grandes de lo necesario.

Utiliza herramientas como SVGOMG (un optimizador en línea) o SVGO (una herramienta de línea de comandos) para eliminar elementos innecesarios. Estas herramientas simplifican las rutas y comprimen los archivos sin perder calidad.

– Archivo SVG comprimido de 5,5 KB a 3,92 KB (reducción del 71,29% del tamaño).

Por ejemplo, un SVG de 50 KB puede reducirse a menudo a menos de 10 KB. Esto acelera los tiempos de carga de la página. También puedes utilizar plugins como ShortPixel o Imagify que optimizan automáticamente los SVG cuando los subes.

2. Simplificar el código SVG

Los SVG complejos con demasiados nodos o scripts incrustados pueden ralentizar la renderización. Abre tus archivos SVG en un editor de código como VS Code. Elimina manualmente los atributos no utilizados (como xlink:href), los estilos en línea o los grupos innecesarios(<g>).

Para que tus SVG sean responsivos:

• Establece width=»100%» y height=»auto» en el código SVG.
• Añade CSS como svg { max-width: 100%; } para asegurar que los gráficos se escalan sin problemas en diferentes dispositivos.

💡 Consejo: Evita las dimensiones fijas a menos que sea necesario. Así te aseguras de que tus gráficos se vean bien en todos los tamaños de pantalla.

3. Estilo con las mejores prácticas

Estilizar tus SVG adecuadamente garantiza que se integren a la perfección con tu tema de WordPress y que mantengan un aspecto coherente en todo tu sitio. Estas son algunas de las mejores prácticas para dar estilo a los SVG:

• Utiliza clases CSS dentro de tu archivo SVG (por ejemplo, <path class=»icon-stroke»>).
• Controla el estilo a través de la hoja de estilos de tu tema.
• Esto mantiene el código limpio y evita estilos en línea que podrían entrar en conflicto con tu tema de WordPress.

Comprobar la compatibilidad de los archivos SVG

Una vez que hayas activado y optimizado los archivos SVG, las pruebas exhaustivas garantizan que se muestren correctamente, tengan un buen rendimiento y sigan siendo seguros en todas las plataformas. A continuación te explicamos cómo validar la compatibilidad SVG de tu sitio WordPress:

1. Pruebas entre navegadores y dispositivos

1. Comprueba la compatibilidad del navegador: Utiliza herramientas como BrowserStack para comprobar la representación de SVG en Chrome, Firefox, Safari, Edge y navegadores heredados.

2. Capacidad de respuesta en móviles: Comprueba que los SVG se adaptan correctamente a las pantallas de los móviles realizando pruebas en dispositivos reales o utilizando el Modo Dispositivo de Chrome DevTools.

– Probar el sitio web de Cloudways en Google Chrome

3. Fallbacks para navegadores heredados: Añade alternativas PNG/JPG utilizando el elemento <imagen> para navegadores no compatibles:

<imagen>

<source srcset="imagen.svg" type="imagen/svg+xml">

<img src="imagen.png" alt="Imagen de reserva">

</imagen>

2. Seguridad y validación del código

Incluso los SVG desinfectados pueden introducir riesgos si no se examinan adecuadamente.

1. Escanea en busca de código malicioso: Sube archivos a SVG Sanitizer Test o utiliza plugins de WordPress como el plugin Safe SVG para detectar scripts, enlaces externos o vulnerabilidades XML.

2. Valida el marcado: Comprueba si hay errores de sintaxis con herramientas como el Validador SVG del W3C. Corrige problemas como atributos viewBox omitidos o etiquetas no cerradas.

– Probar archivos SVG en el Validador SVG del W3C

3. Prueba los permisos de usuario: Asegúrate de que sólo los roles autorizados (por ejemplo, los administradores) pueden subir SVG iniciando sesión como editor o suscriptor e intentando subir un archivo de prueba.

3. Comprobaciones de rendimiento y renderizado

Los SVG optimizados deben cargarse rápidamente e integrarse sin problemas con tu tema.

1. Audita los tiempos de carga: Utiliza GTmetrix o PageSpeed Insights para confirmar que los SVG no están retrasando la carga de las páginas. Asegúrate de que la compresión GZIP está activada para los archivos SVG en tu servidor.

– Interfaz de usuario de GTmetrix

2. Comprueba la interacción con CSS/JS: prueba las animaciones SVG o los efectos hover para asegurarte de que funcionan como se espera. Los conflictos con los estilos del tema pueden romper la funcionalidad: inspecciona los elementos utilizando las DevTools del navegador para depurarlos.

3. Verificar la visualización de la biblioteca multimedia: Algunos temas no muestran las miniaturas SVG. Si los SVG aparecen rotos en WordPress, añade CSS a tu panel de administración:

.media-library-modal img[src$= .svg"]  {

anchura: 100%;

altura: auto;

}

Problemas y correcciones comunes de SVG

Los siguientes son los problemas comunes a los que te puedes enfrentar al utilizar SVGs en WordPress. A continuación te explicamos cómo solucionarlos fácilmente:

• Bordes borrosos: Añade shape-rendering=»crispEdges» al marcado SVG.
• Enlaces rotos: Sustituye las URL absolutas(http://) por rutas relativas(/wp-content/uploads/logo.svg).
• Colores que faltan: Define rellenos/trazos en CSS en lugar de atributos en línea para evitar anulaciones de tema.

Resumen

Activar la compatibilidad con SVG en WordPress mejora el rendimiento y la calidad visual del sitio, pero requiere medidas de seguridad cuidadosas.

Para la mayoría de los usuarios, plugins como Safe SVG ofrecen la solución más segura, mientras que los desarrolladores pueden preferir ajustes manuales del código. Desinfecta siempre los archivos, restringe los permisos y prueba primero los cambios en un sitio de pruebas.

Para una mayor optimización, activa la compresión GZIP de los archivos SVG en tu servidor y combina SVG con imágenes de trama para obtener visuales complejos.