¿Cómo cargar archivos SVG al sitio web de WordPress de forma segura?

Agregar imágenes SVG a sitios de WordPress en lugar de formatos de imágenes tradicionales tiene sus ventajas. Las imágenes aparecen más claras y nítidas sin compresión ni pérdida de resolución.

Pero si tiene una ventaja sobre otros formatos de imagen tradicionales, ¿qué tiene de malo usarlo en lugar de imágenes JPG o PNG?

Bueno, la razón es que WordPress no admite el uso directo de archivos SVG por motivos de seguridad.

Pero esto no significa que no puedas usarlos. En este blog, le brindaremos las mejores formas de agregar fácilmente imágenes SVG a su sitio de WordPress.

¿Qué es SVG?

SVG significa Gráficos vectoriales escalables . Es un tipo de formato de imagen utilizado para mostrar gráficos en sitios web. A diferencia de los formatos de imagen comunes como JPEG o PNG, que se componen de pequeños cuadrados de color (píxeles), los SVG se componen de líneas, formas y texto. Esto los hace escalables , lo que significa que pueden hacerse más grandes o más pequeños sin perder calidad o volverse borrosos.

Por ejemplo, cuando hace zoom en una imagen PNG o JPEG, puede notar que la imagen se pixela (borrosa o granulada). Pero con un SVG, la imagen se mantiene nítida y clara sin importar cuánto la acerques o cambies su tamaño.

¿Cómo funciona SVG?

SVG funciona mediante instrucciones de texto (escritas en XML) para describir las formas y rutas de la imagen. Piense en ello como un conjunto de instrucciones de dibujo sencillas para su navegador web.

Por ejemplo, si dibuja un círculo, un archivo SVG le dirá al navegador algo como:

• “Dibuja un círculo aquí, de este tamaño y de este color”.

Debido a que es un formato vectorial (basado en matemáticas y geometría, no en píxeles), la imagen se puede escalar a cualquier tamaño sin perder su calidad.

Beneficios clave de SVG:

• Escalable : puedes hacer la imagen de cualquier tamaño y seguirá viéndose perfecta.
• Ligero : los SVG suelen tener un tamaño de archivo más pequeño, lo que hace que los sitios web se carguen más rápido.
• Editable : dado que se basa en código, puedes cambiar fácilmente los colores o las formas incluso después de crear la imagen.
• Interactivo : los SVG se pueden animar o hacer interactivos, lo que resulta útil para diseñadores y desarrolladores web.

Casos de uso de ejemplo:

• Logotipos e íconos que deben verse nítidos en todos los dispositivos (desde teléfonos móviles hasta pantallas grandes).
• Ilustraciones o gráficos simples que no necesitan detalles complejos como fotografías.

Nota : Si carga un archivo SVG en el sitio de WordPress, se mostrará un mensaje de error como se muestra a continuación:

Consulte los métodos a continuación:

¿Cómo agregar imágenes SVG al sitio de WordPress?

A continuación se detallan algunos de los mejores métodos que puede seguir para utilizar archivos SVG de forma segura en el sitio de WordPress.

Método 1: agregue archivos SVG o imágenes en WordPress usando el complemento WPCode

Paso 1: instale el complemento WPCode

• ¿Qué es el código WPC? WPCode es un complemento que le ayuda a agregar diferentes fragmentos de código útiles a su sitio de WordPress sin necesidad de escribir el código usted mismo. Estos fragmentos pueden realizar muchas funciones que de otro modo requerirían varios complementos.
• Para comenzar, debe instalar y activar el complemento WPCode. Si no está seguro de cómo instalar un complemento, puede seguir una guía básica, pero generalmente es tan simple como ir a la sección "Complementos" de su panel de WordPress, buscar WPCode, hacer clic en "Instalar" y luego en "Activar". .”

Paso 2: acceda a la biblioteca de fragmentos de WPCode

• Una vez que el complemento esté activado, vaya a su panel de WordPress, luego navegue hasta Fragmentos de código »Agregar fragmento .

• En la barra de búsqueda, escriba 'svg' para encontrar el fragmento que permite cargar archivos SVG.
• Pase el cursor sobre la opción que dice "Permitir carga de archivos SVG" y haga clic en "Usar fragmento" cuando lo vea.

Paso 3: active el fragmento de código

• Después de seleccionar el fragmento, accederá a la página "Editar fragmento" . WPCode ya ha configurado todo por usted, por lo que no necesita preocuparse por cambiar nada.
• Todo lo que necesita hacer es cambiar el interruptor a "Activo" y luego hacer clic en el botón "Actualizar" para guardar los cambios.

Paso 4: cargue archivos SVG a su sitio de WordPress

• Ahora que el fragmento de código está activo, puede cargar archivos SVG como cualquier otro formato de imagen (como JPG o PNG) sin recibir un mensaje de error de WordPress.

• Puede ir a su biblioteca multimedia y cargar un archivo SVG, y funcionará sin problemas en su sitio.

Paso 5 (opcional): permitir que otros usuarios carguen archivos SVG

• De forma predeterminada, sólo los administradores (los usuarios de más alto nivel) de su sitio de WordPress pueden cargar archivos SVG. Si desea permitir que otros usuarios carguen SVG, puede editar el fragmento.
• Cómo hacerlo : debe eliminar las líneas 14 a 16 en el fragmento de código. Estas líneas restringen las cargas de SVG únicamente a administradores. O puede “comentar” la restricción agregando dos barras (//) al comienzo de las líneas 11-13, lo que hará que WordPress ignore esas líneas.

• Una vez que haya hecho esto, haga clic en 'Actualizar' nuevamente para guardar los cambios.

Método 2: cargue archivos o imágenes SVG utilizando el complemento de soporte SVG

Paso 1: instale el complemento de soporte SVG

• ¿Qué es el soporte SVG? SVG Support es un complemento que le permite cargar y mostrar archivos SVG en su sitio de WordPress. También te da control sobre quién puede cargar archivos SVG e incluso te permite usar algunas funciones avanzadas.
• Para comenzar, debe instalar y activar el complemento SVG Support . Si no está seguro de cómo hacer esto, siga una guía sencilla, pero normalmente va a la sección "Complementos" de su panel de WordPress, busca "Soporte SVG", hace clic en "Instalar" y luego en "Activar" .

Paso 2: configurar los ajustes del complemento

• Después de activar el complemento, vaya a su panel de WordPress y navegue hasta Configuración »Soporte SVG .

• Aquí verá algunas opciones para configurar cómo se manejan los archivos SVG.

Paso 3: restringir las cargas de SVG a los administradores

• Para que su sitio web sea más seguro, es posible que desee restringir las cargas de SVG para que solo los administradores (los usuarios de más alto nivel) puedan cargar archivos SVG. Para hacer esto, simplemente marque la casilla junto a "¿Restringir a administradores?" opción.
• Esto evitará que otros usuarios (como editores o autores) carguen archivos SVG.

Paso 4 (opcional): habilite el modo avanzado para funciones adicionales

• El modo avanzado le ofrece opciones adicionales, como permitir animaciones CSS o renderizado SVG en línea , que pueden hacer que sus SVG sean interactivos o animados.
• Si desea utilizar estas funciones avanzadas, simplemente marque la opción 'Modo avanzado' .
• No se preocupe si no está seguro de cuáles son estas funciones avanzadas; si no las necesita, puede omitir este paso.

Paso 5: guarde su configuración

• Una vez que haya configurado los ajustes a su gusto, haga clic en el botón "Guardar cambios" para aplicarlos.

Paso 6: cargue archivos SVG en una publicación o página

• Ahora que el complemento SVG Support está configurado, puede cargar archivos SVG en sus publicaciones o páginas como cualquier otro archivo de imagen.
• Para hacer esto, cree una nueva publicación o edite una existente. En el editor de publicaciones, agregue un bloque de imagen (como lo haría con un JPG o PNG) y cargue su archivo SVG.

Método 3: cargue imágenes o archivos SVG utilizando el complemento Safe SVG

Paso 1: instale el complemento SVG seguro

• ¿Qué es SVG seguro? Safe SVG es un complemento que le permite cargar archivos SVG a WordPress mientras los desinfecta automáticamente. Desinfectar significa limpiar el archivo SVG para eliminar cualquier código potencialmente dañino, haciéndolo más seguro para su sitio web.
• Para comenzar, debe instalar y activar el complemento Safe SVG . Si no está seguro de cómo hacerlo, siga una guía sencilla, pero normalmente va a la sección "Complementos" en su panel de WordPress, busca "SVG seguro" y luego hace clic en "Instalar" y "Activar" .

Paso 2: comience a cargar archivos SVG

• Buenas noticias : una vez activado, ¡el complemento funciona automáticamente! No hay ninguna configuración que necesites configurar.
• Puede comenzar a cargar archivos SVG inmediatamente a su biblioteca multimedia de WordPress, tal como lo haría con cualquier otro formato de imagen (como PNG o JPG).

Paso 3: tenga en cuenta los permisos de los usuarios

• De forma predeterminada, la versión gratuita de Safe SVG permite que cualquier usuario que pueda escribir publicaciones (como autores o editores) cargue archivos SVG. Esto puede ser una preocupación si desea tener más control sobre quién puede cargar archivos SVG, ya que aumenta el riesgo de cargas dañinas.

Paso 4 (opcional): actualice a la versión Premium

• Si desea controlar quién puede cargar archivos SVG (por ejemplo, restringiéndolo solo a administradores), deberá comprar la versión premium del complemento Safe SVG. La versión premium te permite administrar quién puede cargar archivos SVG, lo que te brinda más control sobre la seguridad.

Conclusión

El uso de archivos SVG tiene sus ventajas y puede ser una herramienta poderosa para mejorar la calidad visual y la escalabilidad de las imágenes en su sitio de WordPress.

Sin embargo, debido a los posibles riesgos de seguridad, es importante manejar las cargas SVG de forma segura. Afortunadamente, con los complementos adecuados, puedes utilizar SVG sin comprometer la seguridad de tu sitio.

Esperamos que esta publicación de blog le haya ayudado a aprender cómo agregar imágenes SVG a su sitio de WordPress. En caso de que tenga alguna consulta o sugerencia, escríbala en la sección de comentarios a continuación.

Raúl

Rahul Kumar es un entusiasta de la web y estratega de contenidos especializado en WordPress y alojamiento web. Con años de experiencia y el compromiso de mantenerse actualizado con las tendencias de la industria, crea estrategias en línea efectivas que generan tráfico, aumentan la participación y aumentan las conversiones. La atención de Rahul al detalle y su capacidad para crear contenido atractivo lo convierten en un activo valioso para cualquier marca que busque mejorar su presencia en línea.