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.
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".
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.
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.
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.
- 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.
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.
- 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.
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".
- 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.
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