Cómo agregar SVG en WordPress (con 2 soluciones simples)

¬ŅDesea agregar archivos SVG a su sitio de WordPress? Por defecto, WordPress le permite cargar todos los formatos populares de imagen, audio y video, pero SVG no se encuentra entre ellos. En este art√≠culo, le mostraremos c√≥mo agregar f√°cilmente SVG en WordPress.

Agregue f√°cilmente archivos SVG en WordPress

¬ŅQu√© es el SVG?

SVG o Gráficos vectoriales escalables es un formato de archivo que define gráficos vectoriales utilizando el lenguaje de marcado XML. El principal beneficio de SVG es que le permite ampliar imágenes sin perder calidad ni tener ninguna pixelación.

¬ŅC√≥mo funciona SVG?

Los Gr√°ficos Vectoriales Escalables (SVG) son una tecnolog√≠a que muestra dibujos bidimensionales usando XML. Son diferentes a los formatos de imagen utilizados com√ļnmente como PNG, GIF o JPEG.

Si toma un archivo de imagen png / jpeg y hace zoom, notar√° que la imagen comenzar√° a desdibujarse y pixelarse.

Los gráficos vectoriales no usan píxeles. En cambio, usan un mapa bidimensional que define el gráfico que está viendo. A medida que se acerca, la imagen no se pixela.

Esto le permite ampliar los gr√°ficos vectoriales sin perder calidad. Lo m√°s importante es que las im√°genes SVG pueden ser mucho m√°s peque√Īas en tama√Īo de archivo que JPEG o PNG.

Los gr√°ficos vectoriales se usan com√ļnmente para iconos, fuentes de iconos, logotipos de sitios web e im√°genes de marca. Es posible que desee agregar archivos SVG en WordPress para el logotipo, los iconos u otros gr√°ficos de su empresa.

Por geniales que parezcan, los archivos SVG siguen siendo un poco inseguros. Es por eso que WordPress no admite la carga de archivos SVG de forma predeterminada.

Si carga una imagen SVG en WordPress, ver√° el siguiente mensaje de error:

Lo sentimos, este tipo de archivo no est√° permitido por razones de seguridad.

Error de seguridad SVG en WordPress

Problemas de seguridad relacionados con SVG en WordPress

Los archivos SVG contienen código en el lenguaje de marcado XML que es similar al HTML. Su navegador o software de edición SVG analiza el lenguaje de marcado XML para mostrar el resultado en la pantalla.

Sin embargo, esto abre su sitio web a posibles vulnerabilidades XML. Se puede utilizar para obtener acceso no autorizado a los datos del usuario, desencadenar ataques de fuerza bruta o ataques de secuencias de comandos en sitios cruzados.

Los métodos que compartiremos en este artículo intentarán desinfectar los archivos SVG para mejorar su seguridad. Sin embargo, estos complementos no pueden evitar totalmente que se cargue o inyecte código malicioso.

La mejor solución es usar solo archivos SVG creados por fuentes confiables y restringir las cargas SVG solo a usuarios confiables.

Para obtener más información sobre seguridad, consulte nuestra guía de seguridad completa de WordPress para principiantes.

Dicho esto, echemos un vistazo a cómo usar archivos SVG de manera fácil y segura en WordPress.

Método 1. Cargue archivos SVG en WordPress usando el soporte SVG

Este método ofrece soporte completo para agregar archivos SVG en WordPress. También le permite mostrar SVG en línea en publicaciones y páginas de WordPress.

Primero, debe instalar y activar el complemento SVG Support. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activaci√≥n, debe visitar Configuraci√≥n ¬ĽSoporte SVG p√°gina para configurar los ajustes del complemento.

Configuraciones de soporte SVG

En la p√°gina de configuraci√≥n, debe marcar la casilla junto a la opci√≥n “¬ŅRestringir a los administradores?”. Esto permitir√° que solo un administrador del sitio cargue archivos SVG en WordPress.

La siguiente opción es activar el modo avanzado. Solo necesita marcar esta opción si desea usar funciones avanzadas como animaciones CSS y renderizado SVG en línea.

No olvides hacer clic en el botón Guardar cambios para guardar tu configuración.

Ahora puede crear una nueva publicación o editar una existente. En el editor de publicaciones, cargará su archivo SVG como cargaría cualquier otro archivo de imagen. Simplemente agregue un bloque de imagen al editor y luego cargue el archivo SVG.

Ahora podr√° cargar e incrustar archivos SVG en WordPress.

Archivo SVG incrustado en publicación de WordPress

Método 2. Sube archivos SVG en WordPress usando Safe SVG

Este método también utiliza un complemento y le permite realizar la desinfección de los archivos SVG cargados en WordPress.

Lo primero que debe hacer es instalar y activar el complemento Safe SVG. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

El complemento funciona de f√°brica, y no hay configuraciones para que pueda configurar. Simplemente puede seguir adelante y comenzar a cargar archivos SVG.

La desventaja es que este complemento permite la carga de SVG por parte de todos los usuarios que pueden escribir publicaciones en su sitio de WordPress.

Para controlar quién puede cargar archivos, deberá comprar la versión premium del complemento.

Esperamos que este artículo te haya ayudado a aprender cómo agregar SVG de forma segura en WordPress. Es posible que también desee ver nuestro artículo sobre los problemas de imagen más comunes en WordPress y cómo solucionarlos.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para ver videos tutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.