¿Quieres añadir archivos SVG a tu sitio de WordPress?
Por defecto, WordPress le permite subir casi todos los formatos populares de archivos de imagen, audio y vídeo. Sin embargo, SVG no está entre ellos. Esto se debe a que existen posibles problemas de seguridad con el formato de imagen, pero hay formas seguras de utilizarlos.
En este artículo, le mostraremos cómo añadir SVG en WordPress de forma fácil y segura.
¿Qué es SVG?
SVG o Scalable Vector Graphics es un formato de archivo que define gráficos vectoriales utilizando el idioma de marcado XML. La principal ventaja de SVG es que permite ampliar imágenes sin perder calidad ni tener píxeles.
¿Cómo funciona SVG?
Los gráficos vectoriales escalables (SVG) son una tecnología que muestra dibujos bidimensionales mediante XML. Son diferentes de los formatos de imagen utilizados habitualmente, como PNG, GIF o JPG.
Si toma un archivo de imagen PNG o JPG y lo amplía / acerca, notará que la imagen empieza a difuminarse y a pixelarse.
Los gráficos vectoriales no utilizan píxeles.
En su lugar, utilizan un mapa bidimensional que define el gráfico que estás viendo como coordenadas. Al ampliar / acercar, la imagen no se pixela porque simplemente no puede.
Esto le permite ampliar los gráficos vectoriales sin perder calidad. Y lo que es más importante, las imágenes SVG pueden tener un tamaño de archivo mucho menor que un archivo PNG o JPG.
Los gráficos vectoriales se utilizan comúnmente para iconos, fuentes de iconos, logotipos de sitios web e imágenes de marca / marca. Puede añadir archivos SVG a WordPress para el logotipo de su empresa, iconos u otros gráficos.
Aunque suenan muy bien, los archivos SVG pueden ser un poco inseguros. Por eso WordPress no es compatible con subidas de archivos SVG por defecto.
Si subes una imagen SVG en WordPress, verás el siguiente mensaje de error:
Lo siento, 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 idioma de marcado XML, que es similar al HTML. El navegador o el software de edición de SVG analizan el idioma XML para mostrar el resultado en la pantalla.
Sin embargo, esto abre su sitio web a posibles vulnerabilidades XML. Puede utilizarse para obtener acceso no autorizado a los datos de los usuarios, desencadenar ataques de fuerza bruta o ataques de secuencias de comandos en sitios cruzados.
Los métodos que compartiremos en este artículo tratarán de desinfectar archivos SVG para mejorar su seguridad. Sin embargo, estos plugins no pueden evitar totalmente que se suba o inyecte código malintencionado.
La mejor solución es utilizar solo archivos SVG creados por fuentes fiables y restringir las subidas de SVG solo a usuarios de confianza.
Para saber más acerca de la seguridad, compruebe nuestra completa guía de seguridad de WordPress para principiantes.
Dicho esto, veamos cómo utilizar archivos SVG en WordPress de forma fácil y segura utilizando uno de los 3 métodos siguientes.
Tutorial en vídeo
Si prefiere instrucciones escritas, siga leyendo.
Método 1. Permitir archivos SVG en WordPress usando WPCode (Recomendado)
La forma más sencilla y fácil de permitir subidas de SVG a WordPress de forma segura es utilizando WPCode, el plugin de fragmentos de código más potente que existe.
WPCode viene con una gran biblioteca de fragmentos de código preconfigurados que pueden sustituir a muchos plugins de un solo uso en su sitio, desde desactivar páginas de adjuntos, utilizar el editor de entradas clásico o permitir la subida de archivos SVG.
En primer lugar, deberá instalar y activar el plugin gratuito WPCode. Para obtener instrucciones detalladas, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Una vez activado, debe ir a Fragmentos de código ” Añadir fragmento en su panel de administrador de WordPress. Busque “svg” y pase el cursor sobre “Permitir la subida de archivos SVG”.
A continuación, puede hacer clic en “Usar fragmento de código”.
A continuación, irás a la página ‘Editar fragmento de código’ donde WPCode ya ha establecido todos los ajustes que el código necesita para ejecutarse.
Lo único que tiene que hacer es pulsar el interruptor en “Activo” y, a continuación, pulsar el botón “Actualizar”.
Ahora podrá subir archivos SVG sin que WordPress le envíe un mensaje de error o advertencia.
A continuación, puede tratarla como lo haría con cualquier otra imagen de su sitio web WordPress.
Por defecto, el fragmento de código WPCode solo permite a los usuarios con el perfil de Administrador añadir SVGs a WordPress.
También puede conceder permiso a todos los demás perfiles de usuario simplemente borrando las líneas 14-16 del fragmento de código que ve en la imagen de abajo.
También puedes ‘comentarlas’ añadiendo dos barras ‘//’ al principio de cada una de esas líneas, dándoles un color tostado claro. WPCode no ejecutará ninguna parte del fragmento de código que vea como un comentario en lugar de código.
Puede ver un ejemplo de esto en las líneas 11-13 de la imagen inferior.
De cualquier forma, con el código eliminado, todos los usuarios podrán subir archivos SVG a su sitio WordPress. Asegúrese de hacer clic en “Actualizar” para guardar los cambios realizados.
Método 2. Subir archivos SVG en WordPress usando soporte SVG
Este método utiliza el plugin SVG Support y le permite mostrar SVGs integrados en entradas y páginas de WordPress, así como controlar quién tiene permiso para subirlos.
En primer lugar, debe instalar y activar el plugin SVG Support. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Una vez activado, debe visitar la página Ajustes ” Soporte SVG para configurar los ajustes del plugin.
En la página de ajustes, debe marcar / comprobar la casilla siguiente a la opción ‘¿Restringir a los administradores? Esto permitirá que solo un administrador del sitio pueda subir archivos SVG en WordPress.
La siguiente opción es activar el modo avanzado. Solo tiene que comprobar esta opción si desea utilizar características avanzadas como animaciones CSS y procesar / mostrar SVG integrado.
No olvides hacer clic en el botón “Guardar cambios” para establecer los ajustes.
Ahora puede crear una nueva entrada o editar una ya existente. En el editor de entradas, subirá su archivo SVG como subiría cualquier otro archivo de imagen. Simplemente añade un bloque de imagen al editor y luego sube el archivo SVG.
Ahora podrá subir e incrustar archivos SVG en WordPress.
Método 3. Subir archivos SVG en WordPress usando Safe SVG
Este método también utiliza un plugin y permite realizar la desinfección de los archivos SVG subidos a WordPress.
Lo primero que tienes que hacer es instalar y activar el plugin Safe SVG. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
El plugin funciona de forma inmediata y no hay ajustes que configurar. Usted puede simplemente seguir adelante y empezar a subir archivos SVG.
La desventaja es que este plugin permite subidas SVG por todos los usuarios que pueden escribir entradas en su sitio de WordPress. Para controlar quién puede subir archivos, usted tendrá que comprar la versión premium del plugin.
Esperamos que este artículo te haya ayudado a aprender cómo añadir archivos SVG en WordPress de forma segura. Puede que también quieras ver nuestro artículo sobre cómo corregir los problemas de imagen más comunes en WordPress y los mejores plugins y herramientas SEO.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Eugene Velasquez says
I have added all the SVG plugins but still am being blocked from adding SVGs, which I have created on my own so there is no risk or malicious code. Is there another way to add the SVG files to wordpress?
WPBeginner Support says
If even the plugins do not allow you to add SVGs to your site, we would recommend reaching out to your hosting provider to ensure they do not have a security setting that may be overriding your WordPress.
Administrador
Felix Krusch says
Since the inception of Blocks you can just add SVG code in a “Custom HTML Block”. No snippet plugin necessary anymore.
WPBeginner Support says
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 says
Hi,
Thanks for your articles.
Usually I refer to you website and I learn many things from it.
Here you wrote using svg files in websites is not safe.
My question is that if I create the svg file myself from adobe illustrator or similar software,
is it again unsafe to put it in my website?
and should I use safe svg plugin?
Thanks!
WPBeginner Support says
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 says
Do you mean there will be no vulnerabilities in such case?
WPBeginner Support says
The vulnerabilities to worry about would be if you add an SVG from an unknown source that could have added malicious code.
sn says
Thank you very much for your answer.
mr waghela says
thank you sir for share best info
WPBeginner Support says
Glad our guide was helpful
Administrador
Alan Smith says
Thanks a lot
WPBeginner Support says
You’re welcome
Administrador
Amandine says
Hi, I have successfully uploaded the SVG plugin and can upload my SVG file but at the point of cropping the logo, I cannot crop it and therefore it does not appear on my website. It appears nice and crisp on the side customising panel on the left but not on the website. Whereas if I upload a PNG file, the cropping works and it appears on the customising panel as well as the website. Please could you let me know if there’s anything I need to do for my SVG logo to appear on the website? Thank you
WPBeginner Support says
You would need to edit your SVG using something other than your WordPress site to crop it to the size you’re wanting
Administrador
pushkraj says
I want to upload a svgz (svg compressed) but I get an error of security reasons. Although I can upload SVG. format without any problem but I need svgz in order to reduce the file size. Please help me with my query.
Thank you.
WPBeginner Support says
To allow that file type, you would want to take a look at our guide here: https://www.wpbeginner.com/wp-tutorials/how-to-add-additional-file-types-to-be-uploaded-in-wordpress/
Administrador
Brian says
Hello WPBeginner,
I added the plugin Safe SVG to my website but it seems my SVG files get broken uploaded. I cannot use them. How is this possible?
WPBeginner Support says
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 says
Thank for a fully covered info,
I wonder if I could use SVG Support to upload the web logo?
WPBeginner Support says
So long as your theme does not specifically override this, you should be able to.
Administrador
Scott says
I understand the complexity of converting pixel images to mathematical.
Has there come along a fairly simple or automated method or program to convert jpegs and .png images to SVG?
Editorial Staff says
Hey Scott,
Not that we are aware of yet.
Administrador
Cactoos says
As far as I tried, inkscape can do exactly that. It’s free and it works in windows, Mac, and Linux.
Gimp, illustrator, and I’m not that sure, but maybe krita can do this also.
Gimp and krita are also free and multi OS.
Indeed I converted a pretty heavy and high quality photo to svg (previous jpg image direct from the photo camera) and it worked flawlessly, it took his time, but it works. It might be because I’m in a pretty weak system.
Salman Ravoof says
Almost all vector editing software have that functionality. Both Inkscape and Illustrator can do it. However, the results won’t be as good if you have complex shapes and a lot of colours (all real life images come under this) . This functionality is best used for images which have less than 4 colours, the lesser the better.