Agregar archivos SVG a tu sitio de WordPress puede hacer que tus imágenes se vean nítidas y claras.
Sin embargo, aunque WordPress te permite subir muchos tipos de archivos, como imágenes, audio y video, no admite archivos SVG de forma nativa.
Esto se debe a que los archivos SVG pueden presentar riesgos de seguridad. Pero no te preocupes. Hay formas seguras de usar SVGs.
En este artículo, te mostraremos cómo agregar archivos de imagen SVG a WordPress de manera fácil y segura.
¿Qué es SVG?
SVG, o Gráficos Vectoriales Escalables, es un formato de archivo que define gráficos vectoriales utilizando el lenguaje de marcado XML. Su principal beneficio es que te permite ampliar imágenes sin perder calidad ni sufrir pixelación.
¿Cómo funciona SVG?
Gráficos Vectoriales Escalables (SVG) es una tecnología que muestra dibujos bidimensionales utilizando XML. Es diferente de los formatos de imagen comúnmente utilizados como PNG, GIF o JPG.
Si tomas un archivo de imagen PNG o JPG y lo amplías, notarás que la imagen se difuminará y se pixelará.
Los gráficos vectoriales no usan píxeles.
En cambio, utilizan un mapa bidimensional que define el gráfico que estás viendo como coordenadas. La imagen no se pixeliza al ampliarla porque simplemente no puede.
Esto te permite ampliar 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 los archivos PNG o JPG, lo que las convierte en una excelente opción para el formato de imagen.
Los gráficos vectoriales se usan comúnmente para íconos, fuentes de íconos, logotipos de sitios web e imágenes de marca. Es posible que desees agregar archivos SVG a WordPress para el logotipo de tu empresa, íconos u otros gráficos.
Sin embargo, los archivos SVG pueden ser un poco inseguros. Es por eso que WordPress no admite la carga de archivos SVG de forma predeterminada.
Si cargas una imagen SVG en WordPress, verás el siguiente mensaje de error: 'Lo sentimos, este tipo de archivo no está permitido por razones de seguridad.'
Problemas de seguridad relacionados con SVG en WordPress
Los archivos SVG contienen código en el lenguaje de marcado XML, que es similar a HTML. Tu navegador o software de edición SVG analiza el lenguaje de marcado XML para mostrar la salida en la pantalla.
Sin embargo, esto expone tu sitio web a posibles vulnerabilidades de XML. Se puede usar para obtener acceso no autorizado a datos de usuarios o desencadenar ataques de fuerza bruta o ataques de scripting entre sitios.
Los métodos que compartiremos en este artículo intentarán sanear los archivos SVG para mejorar su seguridad. Sin embargo, estos complementos no pueden prevenir totalmente el código malicioso de ser subido o inyectado.
La mejor solución es usar solo archivos SVG creados por fuentes confiables y restringir las cargas de SVG a usuarios de confianza. Para obtener más información sobre seguridad, puedes consultar nuestra guía completa de seguridad de WordPress para principiantes.
Con esto en mente, te mostraremos cómo usar archivos SVG en WordPress de manera fácil y segura con 3 métodos. Simplemente usa los enlaces rápidos a continuación si te interesa un método en particular:
- Método 1. Permitir archivos SVG en WordPress usando WPCode (Recomendado)
- Método 2. Subir archivos SVG en WordPress usando SVG Support
- Método 3. Subir archivos SVG en WordPress usando Safe SVG
Consejo de experto: Antes de decidirte a usar archivos de imagen SVG, no olvidemos que también puedes usar herramientas de edición de imágenes para comprimir el tamaño de los archivos y mejorar la velocidad y el rendimiento de tu WordPress.
¿Listo? Empecemos con un tutorial en video.
Tutorial en video
Si prefieres instrucciones escritas, sigue leyendo.
Método 1. Permitir archivos SVG en WordPress usando WPCode (Recomendado)
La forma más sencilla de permitir cargas de SVG de forma segura en WordPress es usando WPCode, el plugin de fragmentos de código más potente disponible.
WPCode tiene una gran biblioteca de fragmentos de código preconfigurados que pueden reemplazar muchos plugins de uso único en tu sitio. Incluye fragmentos para deshabilitar páginas de adjuntos, mantener el Editor Clásico de Entradas y permitir cargas de archivos SVG, todo sin el riesgo de romper tu sitio web.
Para empezar, necesitarás instalar y activar el plugin gratuito WPCode. Para obtener instrucciones detalladas, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Al activarlo, querrás navegar al panel de administración de tu WordPress en Fragmentos de código » Agregar fragmento. Simplemente busca 'svg' y pasa el mouse sobre 'Permitir carga de archivos SVG'.
Haz clic en 'Usar fragmento' cuando aparezca.
A continuación, aterrizarás en la página 'Editar fragmento', donde WPCode ya ha configurado todos los ajustes que el código necesita para ejecutarse.
Todo lo que necesitas hacer es hacer clic en el interruptor a 'Activo' y luego presionar el botón 'Actualizar'.
Ahora, puedes cargar archivos SVG sin que WordPress te dé un mensaje de error o advertencia.
Luego puedes tratarlo como cualquier otra imagen en tu sitio web de WordPress.
Por defecto, el fragmento de WPCode solo permite a los usuarios con el rol de 'Administrador' agregar SVGs a WordPress.
También puedes otorgar permiso a todos los demás roles de usuario eliminando las líneas 14-16 del fragmento de código. Luego, puedes 'comentarlas' agregando dos barras diagonales, '//', al principio de las líneas 11-13, convirtiéndolas en un color beige claro.
WPCode no ejecutará ninguna parte del fragmento que vea como un comentario en lugar de código. Puedes ver este ejemplo en la imagen a continuación.
De cualquier manera, con el código eliminado, todos los usuarios pueden cargar archivos SVG en tu sitio. Solo asegúrate de hacer clic en 'Actualizar' para guardar cualquier cambio que realices.
Método 2. Subir archivos SVG en WordPress usando SVG Support
Este segundo método utiliza el plugin SVG Support. Te permite mostrar SVGs dentro de las publicaciones y páginas de WordPress y controlar quién puede cargarlos.
Primero, necesitas instalar y activar el plugin SVG Support. Para más detalles, puedes ver nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Al activarse, querrás ir a Configuración » Soporte SVG para configurar los ajustes del plugin.
En la página de configuración, simplemente marca la casilla junto a la opción ‘¿Restringir a administradores?’. Esto permitirá que solo un administrador del sitio pueda subir archivos SVG en WordPress.
El siguiente paso es activar el modo avanzado. Solo necesitas marcar esta opción si deseas usar funciones avanzadas como animaciones CSS y renderizado SVG en línea.
No olvides hacer clic en el botón ‘Guardar Cambios’ para almacenar tu configuración.
Ahora puedes crear una nueva publicación o editar una existente. En el editor de publicaciones, podrás subir tu archivo SVG como subirías cualquier otro archivo de imagen.
Simplemente agrega un bloque de imagen al editor y luego sube el archivo SVG.
Método 3. Subir archivos SVG en WordPress usando Safe SVG
Este método también utiliza un plugin y te permite sanear los archivos SVG subidos a WordPress.
Lo primero que necesitas hacer es instalar y activar el plugin Safe SVG. Para más detalles, por favor consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
El plugin funciona directamente, y no hay configuraciones que debas realizar. Simplemente puedes proceder a subir archivos SVG.
La desventaja es que este plugin permite la carga de SVG a todos los usuarios que pueden escribir publicaciones en tu sitio de WordPress. Para controlar quién puede subir archivos, debes comprar la versión premium del plugin.
Esperamos que este artículo te haya ayudado a aprender cómo agregar archivos SVG de forma segura en WordPress. También te puede interesar nuestra guía sobre cómo agregar un widget al encabezado de tu sitio web y nuestras selecciones expertas de fragmentos de código útiles para principiantes.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Dennis Muthomi
Cambié a un cliente de logotipos PNG a SVG. La diferencia de velocidad fue asombrosa, ¡especialmente en móviles!
Un consejo rápido de mi experiencia: Siempre crea una copia de seguridad en PNG y usa el elemento 'picture' en tu código. De esta manera, estarás cubierto con navegadores antiguos mientras obtienes todos los beneficios de SVG en los modernos.
Realmente aprecio los consejos de seguridad también, ¡son súper importantes cuando se trabaja en sitios de clientes!
Jiří Vaněk
Una vez leí un artículo interesante sobre por qué los archivos SVG pueden ser peligrosos. Sin embargo, antes de tener esa información, estaba lidiando constantemente con WordPress, que se negaba a subir SVGs, y estaba bastante frustrado. Tengo iconos para la web en formato SVG. Sin embargo, WPCode y un simple fragmento realmente me ayudaron. Es una solución sencilla y funcional que cualquiera puede manejar, incluso un principiante total.
Eugene Velasquez
He agregado todos los plugins SVG pero todavía se me impide agregar SVGs, que he creado yo mismo, por lo que no hay riesgo ni código malicioso. ¿Hay otra forma de agregar los archivos SVG a WordPress?
Soporte de WPBeginner
Si incluso los plugins no te permiten agregar SVGs a tu sitio, te recomendamos que te pongas en contacto con tu proveedor de hosting para asegurarte de que no tengan una configuración de seguridad que pueda estar anulando tu WordPress.
Administrador
Felix Krusch
Desde la introducción de los Bloques, puedes simplemente agregar código SVG en un "Bloque de HTML personalizado". Ya no es necesario un plugin de fragmentos.
Soporte de WPBeginner
If the image is hosted elsewhere that would work but to upload we would recommend using the snippet at this time. You would also not want to add the PHP code using the HTML snippet if that is what you mean
Administrador
sn
Hola,
Gracias por tus artículos.
Normalmente consulto tu sitio web y aprendo muchas cosas de él.
Aquí escribiste que usar archivos SVG en sitios web no es seguro.
Mi pregunta es si creo el archivo SVG yo mismo desde Adobe Illustrator o software similar,
¿sigue siendo inseguro ponerlo en mi sitio web?
¿y debería usar el plugin Safe SVG?
¡Gracias!
Soporte de WPBeginner
If you are the person who created the SVG and there are no other users uploading files to your site, you are fine to not use the safe SVG plugin.
Administrador
sn
¿Quieres decir que no habrá vulnerabilidades en ese caso?
Soporte de WPBeginner
Las vulnerabilidades de las que preocuparse serían si agregas un SVG de una fuente desconocida que podría haber agregado código malicioso.
sn
Muchas gracias por tu respuesta.
mr waghela
Gracias señor por compartir la mejor información
Soporte de WPBeginner
Glad our guide was helpful
Administrador
Alan Smith
Thanks a lot
Soporte de WPBeginner
You’re welcome
Administrador
Amandine
Hola, he subido con éxito el plugin SVG y puedo subir mi archivo SVG, pero en el punto de recortar el logo, no puedo recortarlo y por lo tanto no aparece en mi sitio web. Aparece bonito y nítido en el panel de personalización del lado izquierdo, pero no en el sitio web. Mientras que si subo un archivo PNG, el recorte funciona y aparece en el panel de personalización, así como en el sitio web. ¿Podría informarme si hay algo que deba hacer para que mi logo SVG aparezca en el sitio web? Gracias
Soporte de WPBeginner
Necesitarías editar tu SVG usando algo más que tu sitio de WordPress para recortarlo al tamaño que deseas
Administrador
pushkraj
Quiero subir un svgz (svg comprimido) pero me sale un error por razones de seguridad. Aunque puedo subir el formato SVG sin ningún problema, necesito svgz para reducir el tamaño del archivo. Por favor, ayúdenme con mi consulta.
Gracias.
Soporte de WPBeginner
Para permitir ese tipo de archivo, querrás echar un vistazo a nuestra guía aquí: https://www.wpbeginner.com/wp-tutorials/how-to-add-additional-file-types-to-be-uploaded-in-wordpress/
Administrador
Brian
Hola WPBeginner,
Agregué el plugin Safe SVG a mi sitio web, pero parece que mis archivos SVG se suben rotos. No puedo usarlos. ¿Cómo es esto posible?
Soporte de WPBeginner
You would want to reach out to the plugin’s support and let them know about the issue and they should be able to assist
Administrador
Huu Tai
Gracias por la información completa,
Me pregunto si podría usar SVG Support para subir el logo web?
Soporte de WPBeginner
Siempre y cuando tu tema no anule específicamente esto, deberías poder hacerlo.
Administrador
Scott
Entiendo la complejidad de convertir imágenes de píxeles a matemáticas.
¿Ha surgido un método o programa bastante simple o automatizado para convertir imágenes jpeg y .png a SVG?
Personal editorial
Hola Scott,
No que sepamos todavía.
Administrador
Cactoos
Hasta donde intenté, Inkscape puede hacer exactamente eso. Es gratis y funciona en Windows, Mac y Linux.
Gimp, Illustrator, y no estoy muy seguro, pero tal vez Krita también pueda hacer esto.
Gimp y Krita también son gratuitos y multiplataforma.
De hecho, convertí una foto bastante pesada y de alta calidad a SVG (imagen JPG previa directa de la cámara fotográfica) y funcionó a la perfección, tomó su tiempo, pero funciona. Podría ser porque estoy en un sistema bastante débil.
Salman Ravoof
Casi todo el software de edición vectorial tiene esa funcionalidad. Tanto Inkscape como Illustrator pueden hacerlo. Sin embargo, los resultados no serán tan buenos si tienes formas complejas y muchos colores (todas las imágenes de la vida real entran en esta categoría). Esta funcionalidad se usa mejor para imágenes que tienen menos de 4 colores, cuanto menos, mejor.