¿Cómo subir imágenes SVG en WordPress? – Aprendermarketing.es/

WordPress es el sistema de gestión de contenido más popular para crear sitios web. Sin embargo, viene con limitaciones y no permite cargar cierto tipo de archivos. SVG es uno de esos tipos de archivos. WordPress no permite cargar desde el panel de administración. Si necesita cargar imágenes SVG, aquí le mostramos cómo usarlas en su sitio de WordPress.

Uso de imágenes SVG

Scalable Vector Graphics (SVG) es un formato de imagen basado en XML ampliamente utilizado que puede editar con cualquier editor de texto. Aquí hay algunas razones por las que el formato SVG es adecuado:

  • La ventaja es que usa compresión sin pérdidas y por lo tanto puedes escalar las imágenes sin perder calidad.
  • Muchos complementos de bloqueo de WordPress y complementos de creación de páginas utilizan imágenes SVG para ofrecer hermosas animaciones y gráficos.
  • Además, muchos sitios web de imágenes gratuitas ofrecen gráficos vectoriales gratuitos en formato SVG de alta calidad y tamaño pequeño. Como puede ver en la imagen a continuación, el tamaño de la imagen SVG es de 34 KB, mientras que el formato PNG más pequeño tiene un tamaño de 154 KB.
Tamaño de archivo SVG más pequeño en comparación con PNG

Comportamiento predeterminado al cargar imágenes SVG en WordPress

Sin embargo, WordPress no le permitirá cargar archivos SVG.

  • Inicie sesión en su panel de administración de WordPress y abra el menú Medios > Agregar nuevo.
  • Haga clic en el botón «Elegir archivos» y cargue una imagen SVG desde su computadora.
  • Verá el mensaje de error que menciona “Lo sentimos, no tienes permiso para subir este tipo de archivo«.
Error al cargar el archivo SVG a WordPress
Error al cargar el archivo SVG a WordPress

Verá el mismo error si intenta cargar un archivo SVG utilizando un bloque de imagen en el editor de Gutenberg. Ni siquiera podrá seleccionar archivos SVG para cargar a través de la opción «Biblioteca multimedia» del bloque de imágenes.

Error al cargar el archivo SVG en Gutenberg Editor
Error al cargar el archivo SVG en Gutenberg Editor

Problemas de seguridad de SVG

Como se mencionó, a diferencia de otros formatos gráficos, SVG es un archivo de texto XML que cualquiera puede editar y agregar código malicioso. Puede usar las aplicaciones Notepad o TextEdit para inyectar fácilmente código arbitrario en el archivo de salida XML. Por lo tanto, los archivos SVG son vulnerables a Cross Site Scripting (XSS), fuerza bruta y ataques de entidad externa XML. Debido a estos problemas de seguridad, WordPress bloqueará de forma segura las cargas de imágenes SVG y protegerá su sitio.

Edite el SVG XML en TextEdit
Edite el SVG XML en TextEdit

Sin embargo, si usted es la persona que crea la imagen SVG (por ejemplo, usando Adobe Illustrator), puede cargarla ya que tiene un código limpio. Básicamente, esto significa que debe evitar que otros usuarios (editor, colaborador u otro administrador) carguen el SVG. Además, evite descargarlo desde sitios web desconocidos y cargarlo en su sitio, ya que puede contener código malicioso.

¿Cómo subir imágenes SVG en WordPress?

Hay dos opciones para permitir cargas SVG en WordPress.

1. Usar un complemento para permitir cargas SVG

Esta es una opción súper fácil para instalar un complemento y habilitar las cargas SVG en WordPress.

  • Vaya a su panel de administración y abra la pestaña Complementos > Agregar nuevo.
  • Busque «svg» para encontrar el complemento «SVG Support».
  • Instale el complemento y actívelo en su sitio.
Instale el complemento de soporte SVG
Instale el complemento de soporte SVG
  • Ahora intente cargar sus archivos SVG a través del menú Medios > Agregar nuevo o desde el editor de publicaciones.
  • Los archivos se cargarán correctamente, puede copiar la URL de la imagen y verla en un navegador como cualquier otra imagen cargada.
Archivo SVG subido con éxito
Archivo SVG subido con éxito

Al cargar desde el editor de publicaciones, puede cambiar el tamaño de la imagen como cualquier otra imagen.Además, el complemento ofrece varias configuraciones a las que puede acceder desde la sección Configuración> Soporte SVG.

Configuración del complemento para compatibilidad con SVG
Configuración del complemento para compatibilidad con SVG
  • Restringir a administradores: permite que solo los administradores carguen imágenes SVG y todas las demás funciones de usuario estarán restringidas.
  • Cargar CSS de frontend: habilite esta opción si tiene problemas para cargar CSS en un sitio publicado.
  • Desinfectar SVG al cargar: habilite esta opción para limpiar el archivo XML antes de cargarlo. Esto eliminará todas las URL externas, protegiendo así la carga.
  • Minimizar SVG – habilite la minificación para eliminar espacios, comentarios y otro contenido innecesario del archivo.
  • Eliminar datos del complemento: use esta opción cuando decida desinstalar el complemento de su sitio.
  • Habilitar el modo avanzado: esto abrirá la configuración avanzada que le permite usar Vanilla JS en lugar de JQuery, mover JS al pie de página, desinfectar SVG en la interfaz, SVG en línea y agregar una clase de CSS personalizada.
Configuración avanzada para compatibilidad con SVG
Configuración avanzada para compatibilidad con SVG

2. Código manual para permitir la carga de SVG

La siguiente opción es usar un fragmento de código en lugar de usar un complemento.

  • Vaya a la opción «Apariencia > Editor de archivos de temas» en el panel de administración (si está usando temas basados ​​en bloques, vaya a «Herramientas > Editor de archivos de temas»).
  • Asegúrese de que su tema actual esté seleccionado y haga clic en el archivo «Función de tema» (llamado functions.php).
  • Copie el siguiente fragmento de código.
function svg_support($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'svg_support');
  • Pegue el código copiado al final de su archivo y haga clic en el botón «Actualizar archivo».
Agregar código de soporte SVG en las funciones del tema
Agregar código de soporte SVG en las funciones del tema
  • Ahora cargue un archivo SVG desde la sección Medios > Agregar nuevo o desde el editor de publicaciones usando un bloque de imagen. Debería poder cargarlo correctamente sin un error.
Vista previa de la imagen SVG en Gutenberg Editor
Vista previa de la imagen SVG en Gutenberg Editor

Recuerde que los cambios en el archivo functions.php se eliminarán cuando actualice el tema. Para evitar esto, puede usar un tema secundario y actualizar el archivo functions.php del tema secundario. Alternativamente, puede usar complementos como fragmentos de código para agregar funciones personalizadas a su sitio de WordPress sin editar los archivos de plantilla. .

palabras de cierre

En comparación con la inserción de código de menú, recomendamos usar el complemento de compatibilidad con SVG. Esto le permitirá restringir las cargas de archivos solo a los administradores y eliminar la molestia de mantener manualmente el fragmento de código.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

rtp live

Baccarat Online

Bonus New Member

Roulette Online

Sicbo Online

slot gacor

https://alfarizqireload.com/

https://mininos.es/slot-dana/