Cómo añadir imágenes SVG a WordPress con Divi

En este videotutorial prémium aprenderás a añadir imágenes SVG a WordPress con Divi. Los Gráficos Vectoriales Escalables, o Scalable Vector Graphics (SVG), son un formato de gráficos vectoriales bidimensionales que pueden presentarse tanto de forma estática como animada, en formato XML. Su especificación es un estándar abierto desarrollado por el W3C desde el año 1999, y hoy son uno de los formatos más usados en el diseño web moderno.

Como bien sabes, WordPress soporta múltiples formatos de imágenes, incluyendo JPEG, GIF y PNG. Sin embargo, seguro que en algún momento intentaste subir un archivo SVG a tu biblioteca de medios y te encontraste con que WordPress no lo permite de forma nativa. No te preocupes: existe una solución sencilla, gratuita y segura para habilitar este formato en tu sitio, y en este tutorial te la explico paso a paso.

¿Por qué usar imágenes SVG en tu sitio web?

Antes de entrar en la parte técnica, quiero que entiendas por qué vale la pena molestarse con este formato. Los SVG los puedes usar para iconos, ilustraciones, logotipos o cualquier elemento gráfico en tu web. Al incorporar imágenes SVG en tu sitio obtienes dos beneficios principales que marcan una diferencia real en el rendimiento y la experiencia visual.

El primero es el peso increíblemente bajo de los archivos. Para que lo veas con números concretos, fíjate en esta comparativa de una misma imagen en diferentes formatos:

En la imagen puedes ver que un mismo ícono en JPG puede pesar alrededor de 57 KB, en PNG alrededor de 14.77 KB, y en SVG apenas 1.27 KB. Esa diferencia es enorme si tienes un sitio web con mucha iconografía o ilustraciones. Imagina tener 20 iconos en una página: con PNG estarías cargando casi 300 KB solo en iconos; con SVG, menos de 25 KB. El impacto en la velocidad de carga es muy notable.

El segundo beneficio es la escalabilidad perfecta. Al ser un formato vectorial, la imagen SVG se renderiza matemáticamente en el navegador. Esto significa que sin importar cuánto amplíes la imagen en pantalla, nunca verás el efecto de pixelado o serrado en los bordes que ocurre con los formatos rasterizados como PNG o JPG. Un icono SVG a 100 píxeles se ve exactamente igual de nítido que el mismo icono a 500 píxeles.

Si tienes un sitio con mucha iconografía personalizada, los SVG son tu mejor aliado. Menos peso, mejor nitidez, sin compromisos.

Dónde conseguir iconos SVG de calidad: Flaticon

Antes de instalar el plugin, quiero darte un tip muy útil sobre dónde encontrar iconos SVG de calidad. La librería más grande de iconos a nivel mundial es Flaticon. La gran mayoría de sus iconos se pueden descargar en formato SVG de forma gratuita, lo cual es una ventaja enorme.

Por ejemplo, si descargo un ícono en PNG a 512 píxeles desde Flaticon, ese archivo puede pesar alrededor de 45 KB. El mismo ícono en SVG pesa aproximadamente 12 KB. Y recuerda que los iconos personalizados que descargues en SVG se descargan en un formato estándar porque son vectores; no tienen un tamaño específico fijo. Tú le das el tamaño que necesitas directamente en Divi al moment de insertarlos.

Esto funciona especialmente bien si tienes un sitio web donde manejas mucha iconografía o símbolos particulares y personalizados. Las páginas de servicios, portafolios con íconos de habilidades, secciones de beneficios con íconos decorativos: todos son candidatos perfectos para usar SVG desde Flaticon.

Cómo habilitar SVG en WordPress con el plugin SVG Support

Hay dos formas de habilitar el soporte SVG en WordPress. La primera implica editar el archivo functions.php de tu tema con un filtro PHP. La segunda —y la que recomiendo en la gran mayoría de los casos— es usar un plugin gratuito llamado SVG Support. Para este tutorial vamos a usar el plugin, porque es más seguro, no requiere tocar código del tema directamente y no se pierde si hay una actualización.

El proceso es muy simple:

1. Ve a Plugins → Añadir nuevo en tu panel de WordPress y busca "SVG Support". Instala el primero que aparece —es el que tiene más de 300,000 instalaciones activas y el más recomendado por la comunidad.

2. Activa el plugin. Una vez activado, ya podrás subir archivos SVG directamente desde Medios → Biblioteca.

3. Haz clic en Añadir archivo y selecciona tus archivos SVG desde tu computadora. Los archivos con extensión .svg aparecerán en la biblioteca exactamente igual que cualquier imagen PNG o JPG.

4. Ahora abre la página o entrada en el Visual Builder de Divi donde quieres insertar los iconos. Agrega un módulo de imagen, haz clic en el campo de imagen y selecciona el SVG desde tu biblioteca de medios.

5. En los ajustes de tamaño del módulo, ve a Tamaño y define la anchura máxima de la imagen. Puedes comenzar con 100 píxeles para iconos medianos. También puedes aplicar alineación centrada desde las opciones de diseño del módulo.

Una vez que insertas un SVG en Divi, puedes ampliarlo al 300% en el navegador y comprobarás que los bordes siguen siendo perfectamente nítidos, sin ningún tipo de pixelado. Eso no ocurre con PNG ni JPG.

Método alternativo: habilitar SVG editando functions.php

Si prefieres el método manual o ya tienes un child theme de Divi instalado, puedes habilitar SVG en WordPress agregando un filtro al archivo functions.php. Te recomiendo usar este método solo si tienes un child theme activo, porque si lo haces en el functions.php del tema principal, el código se perderá al actualizar Divi.

Este método implica editar el archivo functions.php de tu sitio web de WordPress. Por lo tanto, te recomiendo que sigas estos pasos cuidadosamente si estás familiarizado con PHP y entiendes perfectamente el tema de la seguridad de los SVG.

¡Importante! Asegúrate de hacer una copia de seguridad de tu sitio web de WordPress antes de realizar cualquier cambio para evitar cualquier pérdida de datos en caso de una mala configuración.

Los siguientes pasos explicarán cómo habilitar SVG en WordPress manualmente a través del Administrador de Archivos de WordPress que encontrarás en tu hosting.

1. Accede a cPanel de tu hosting y ve a Archivos → Administrador de Archivos.

2. Dirígete a public_html → wp-includes. Desplázate hacia abajo hasta que encuentres functions.php.

3. Haz doble clic en el archivo para abrirlo y pega el siguiente fragmento de código:

function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');

4. Guarda los cambios e intenta subir un archivo de tipo SVG. Si el proceso es exitoso, tu biblioteca de medios debería aceptar la carga del archivo.

Consideraciones de seguridad con SVG

A diferencia de los formatos de imagen tradicionales como PNG o JPG, los archivos SVG son básicamente código XML. Esto significa que podrían incluir código JavaScript malicioso si provienen de fuentes no confiables. Por eso es importante que solo habilites la subida de SVG a usuarios de confianza en tu WordPress, y que los archivos que subas provengan de fuentes conocidas como Flaticon u otras bibliotecas reconocidas.

El plugin SVG Support maneja esto correctamente al sanitizar los archivos SVG antes de guardarlos en tu biblioteca de medios, lo que lo convierte en la opción más segura para la mayoría de los sitios.

Conclusión

Habilitar el soporte de imágenes SVG en WordPress con Divi es un cambio pequeño que puede tener un impacto real en el rendimiento y la calidad visual de tu sitio. Menos peso en los iconos, mayor nitidez en cualquier pantalla y una experiencia más profesional para tus visitantes. Todo esto con un plugin gratuito y en menos de cinco minutos.

Si lo que buscas es optimizar aún más las imágenes de tu sitio y mejorar la velocidad de carga en general, recuerda que tenemos una lección del curso de optimización de velocidad en Divi donde te enseñamos diferentes herramientas con las que puedes optimizar las imágenes para tu sitio web.

¿Tienes preguntas sobre este proceso o quieres que cubramos algún otro formato de imagen en un próximo tutorial? Déjame tu comentario abajo y con gusto te ayudo.

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido prémium.

Descarga los recursos mencionados en este tutorial acá abajo 👇 siendo premium ⭐

Recursos adicionales:

Plugin de SVG gratuito para WordPress:

Añadir manualmente la compatibilidad SVG de WordPress

Este método implica editar el archivo functions.php de tu sitio web de WordPress. Por lo tanto, te recomendamos que sigas estos pasos cuidadosamente si estás familiarizado con PHP y entiendes perfectamente el tema de la seguridad de los SVG.