access_time
hourglass_empty
person_outline

Cómo cargar en WordPress archivos SVG (la forma segura)

¿Tienes problemas para cargar tus archivos SVG en WordPress? No te preocupes, es un problema común ya que WordPress no admite SVG de forma predeterminada. Si quieres evitar este problema, ¡siéntate y sigue leyendo este artículo! ¡Te enseñaremos lo que debes saber para cargar SVG a WordPress con plugins!

¿Qué es SVG?

SVG (Gráficos vectoriales escalables, por sus siglas en inglés) es un formato de imagen vectorial basado en texto XML. Si bien los formatos de imagen comunes como JPG y PNG están formados por toneladas de pequeños cuadrados llamados píxeles, este formato se basa en el marcado XML para describir las líneas, las formas y otros atributos de imagen.

SVG no ganó popularidad sino hasta hace poco, a pesar de que existe desde los años 90. Una estadística de W3Techs muestra que a partir de abril de 2019, solo el 16,7% de todos los sitios web usan SVG. Pero es probable que este número aumente a medida que los desarrolladores y propietarios de sitios web intenten satisfacer la demanda actual de escalabilidad y velocidad de carga rápida (explicaremos por qué más adelante).

¡Otro gran punto a favor de SVG es que tiene un amplio soporte y funciona bien en todos los principales navegadores como Chrome, Firefox, Safari y Chrome para Android!

Desafortunadamente, las personas con IE8 o versiones anteriores de Chrome y Safari pueden tener problemas porque esos navegadores no son compatibles con el formato. Pero esto no debería ser un problema para los webmasters, ya que la mayoría de las personas no los usan de todos modos (ni siquiera se ubican en la parte superior del mercado de los 15 principales navegadores).

¿Por qué los SVG deberían usarse con más frecuencia?

Mucha gente todavía no está familiarizada con el formato SVG porque no está tan establecido como los gráficos de píxeles. Pero esto no debería de ser así, pues este formato de gráficos tiene muchos beneficios.

La primera ventaja sobresaliente de SVG es su escalabilidad. Como los SVG están basados ​​en vectores, conservan la misma calidad en todas las resoluciones de pantalla.

Si un archivo JPG se ve borroso en un dispositivo en particular porque no es lo suficientemente grande, los SVG se verán perfectamente nítidos. Incluso puedes acercar y alejar tanto como desees sin perder calidad. Esta característica particular es realmente útil cuando se quiere la misma experiencia de usuario de alta calidad para todos los visitantes de tu sitio web.

Los SVG también son conocidos por sus pequeños tamaños de archivo. Por lo tanto, ocupan menos espacio en tu almacenamiento web y se cargan mucho más rápido que las imágenes renderizadas. Pero hay un problema: si tomas una imagen lo suficientemente detallada y la conviertes a SVG, ocupará más espacio que un JPG o PNG en conjunto.

¿Por qué? Bueno, esto se debe a que el tamaño del archivo SVG depende de la complejidad de la imagen. Cuanto más detallada sea la imagen, mayor será el tamaño del archivo. Es por eso que los SVG son más adecuados para logotipos e íconos. Si deseas presentar una imagen altamente detallada, como una fotografía, en tu sitio, los JPG y PNG siguen siendo el camino a seguir.

Otra gran característica para los webmasters es que Google indexa SVG. Todas las imágenes en este formato aparecerán en Google Image Search, lo que le dará a tu sitio un impulso sustancial de SEO.

SVG no forma parte del núcleo de WordPress

Con todas estas ventajas, ¿por qué los SVG no son tan comunes? ¿Por qué WordPress no permite cargar SVG fácilmente?

Bueno, la razón principal por la que WordPress todavía no ha incluido SVG como parte de su núcleo (archivos predeterminados) se debe a los riesgos de seguridad que impone.

Debido a que los SVG son básicamente archivos de texto, las personas pueden editarlos fácilmente insertando código malicioso. Como resultado, tu sitio estaría expuesto a un ataque malicioso que podría conducir a un pirateo catastrófico del mismo. Da un poco de miedo, ¿no es así?

Es por eso que debes tener cuidado al manejar archivos SVG. Si deseas cargar SVG en WordPress, es importante hacerlo de la manera correcta, especialmente si deseas cargar archivos que obtienes de forma gratuita de fuentes desconocidas.

La solución para evitar el código no deseado es desinfectar los archivos SVG. Este proceso elimina códigos sospechosos y errores, lo que hace que las imágenes sean seguras para tu sitio. Cargar en WordPress archivos SVG imprudentemente podría tener graves consecuencias (como un sitio web pirateado y servidores bloqueados).

Todavía hay una discusión en curso sobre cómo hacer que SVG forme parte de las funciones principales de WordPress. Pero debido a que aún no hemos llegado a ese punto, hasta entonces, tenemos que ser creativos y obtener ayuda de otras fuentes al cargar SVG en WordPress.

Cómo subir a WordPress archivos SVG (desinfectados)

La mejor manera de cargar archivos SVG de forma segura en WordPress es mediante Safe SVG, un plugin que desinfecta automáticamente los archivos SVG cargados, eliminando cualquier falla de seguridad. Además, también muestra una vista previa de los archivos SVG en la biblioteca de medios para que puedas agregarlos fácilmente a tu publicación.

Este complemento de WordPress también tiene una versión pro que permite limitar a los usuarios que pueden cargar SVG. Esta característica es muy útil para sitios web con varios contribuyentes, porque puede limitar el acceso a aquellos en quienes no confías.

La versión pro también incluye un servidor de optimización SVGO, que te permite reducir el tamaño del archivo, y el soporte premium en lugar del soporte del foro.

Puedes obtener este plugin desde el repositorio de WordPress o desde tu panel de administración.

Cuando instalas y activas el plugin, no se requieren ajustes de configuración. Simplemente permite cargar SVG, mientras los desinfecta automáticamente.

A continuación te mostramos un ejemplo, donde intentamos cargar una imagen SVG antes de instalar Safe SVG. Como puedes ver, WordPress no lo permite debido a problemas de seguridad.

Error al cargar SVG a WordPress

Pero después de instalar Safe SVG, podemos cargarlo con facilidad. E incluso podemos ver la vista previa de la imagen en lugar de un icono de archivo (que es el caso si usas muchos otros plugins SVG).

SVG se carga en WordPress

¡Y eso es todo! Resulta que subir a WordPress un archivo SVG no es nada difícil, ¿verdad?

Conclusión

Está claro que los SVG tienen muchas ventajas para tu sitio de WordPress. Sin embargo, debido a su formato de texto, las personas podrían insertar un código malicioso y hacer que tu sitio sea vulnerable. Esta es la razón principal por la que WordPress no permite a sus usuarios cargar SVG de forma predeterminada.

Es por eso que si deseas cargar SVG a WordPress, debes hacerlo utilizando la ayuda de SVG Safe, un plugin de WordPress. Te permite cargar archivos SVG mientras elimina cualquier código malicioso de forma automática, haciendo que el archivo no pueda ser parte de un ataque.

Es muy seguro cargar en WordPress archivos SVG si utilizas la ayuda de este plugin, pero aun así te recomendamos que siempre tengas cuidado. Si deseas descargar imágenes SVG gratuitas, comprueba siempre que provienen de una fuente confiable.

El Autor

Author

Deyimar A. / @deyimar

Deyi es una entusiasta del marketing digital, con experiencia en diseño de páginas web, creación de contenido, copywrite y SEO. Forma parte del equipo de SEO & Localization de Hostinger. En su tiempo libre, le gusta desarrollar proyectos, leer un libro o ver una buena película.

Tutoriales relacionados

Agrega un comentario

Comentario*

Nombre*

Correo electrónico*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

¡Forma parte de Hostinger ahora!