SVG Image Field
Proporciona un tipo de campo dedicado, widget y formateadores para cargar y mostrar imágenes SVG (Scalable Vector Graphics) en Drupal.
svg_image_field
Install
composer require 'drupal/svg_image_field:^2.3'
Overview
El módulo SVG Image Field aborda una limitación significativa en el campo Image del núcleo de Drupal, que no soporta archivos SVG. Este módulo proporciona una solución completa para manejar imágenes SVG introduciendo un nuevo tipo de campo llamado "Vector image" junto con un widget y formateador especializados.
A diferencia del enfoque estándar de campo de archivo, SVG Image Field proporciona soporte adecuado para atributos alt y title a nivel de base de datos, una experiencia de usuario intuitiva (simplemente seleccione "Vector image" como su tipo de campo), validación de tipo MIME incorporada para asegurar que solo se carguen archivos SVG válidos, y una imagen de vista previa durante la carga de archivos.
El módulo soporta tanto renderizado SVG en línea (permitiendo manipulación CSS y JavaScript) como salida estándar con etiqueta img. Cuando se usa renderizado en línea, el módulo puede sanitizar el contenido SVG para prevenir ataques XSS usando la biblioteca enshrined/svg-sanitize. Las características adicionales incluyen la capacidad de forzar fill a currentColor para coloración dinámica, vincular imágenes a contenido o URLs de archivos, y aplicar dimensiones personalizadas.
SVG Image Field también se integra perfectamente con el sistema Media de Drupal a través de un plugin de fuente de medios dedicado, permitiendo que los archivos SVG se gestionen como entidades de medios. El submódulo opcional (SVG Image Field - Media Bundle) proporciona un tipo de medio preconfigurado listo para uso inmediato con la Media Library.
Features
- Tipo de campo "Vector image" dedicado específicamente diseñado para archivos SVG con soporte adecuado de atributos alt y title a nivel de base de datos
- Widget específico para SVG con dimensiones de imagen de vista previa configurables (ancho y alto máximo) y validación de carga de archivos
- Múltiples opciones de visualización incluyendo renderizado SVG en línea para manipulación CSS/JavaScript y salida estándar con etiqueta img
- Sanitización SVG incorporada usando la biblioteca enshrined/svg-sanitize para prevenir ataques XSS, con eliminación opcional de referencias remotas
- Dimensiones de imagen configurables (ancho y alto) aplicadas a la salida
- Opción para forzar el atributo fill a currentColor, permitiendo que los SVG hereden el color de elementos padre como enlaces
- Vincular imágenes SVG a la entidad de contenido o URL del archivo
- Configuración de imagen predeterminada tanto a nivel de almacenamiento de campo como de instancia de campo
- Plugin de fuente de medios (SVG) para integración con el módulo Media del núcleo de Drupal
- Compatibilidad con el módulo Stage File Proxy para entornos de desarrollo
- Integración con Media Library con estilos apropiados para miniaturas SVG
- Validación de archivos completa asegurando que los archivos cargados tengan el tipo MIME correcto (image/svg+xml) y estructura XML SVG válida
Use Cases
Gestión de Logos e Iconos
Use SVG Image Field para logos del sitio e iconos que necesitan escalar perfectamente a cualquier tamaño. La opción de renderizado en línea permite que los iconos hereden colores de CSS, habilitando efectos hover y variaciones de color de tema sin crear múltiples archivos de imagen.
Activos SVG en Media Library
Habilite el submódulo Media Bundle para crear un tipo de medio Vector image. Los editores de contenido pueden entonces cargar SVG a través de la Media Library, reutilizarlos en todo el sitio y gestionarlos centralmente junto con otros activos de medios como imágenes y videos.
Gráficos Responsivos
Almacene infografías, diagramas o ilustraciones como SVG. Con dimensiones configuradas en el formateador, el mismo SVG puede mostrarse en diferentes tamaños en diferentes modos de vista (teaser vs completo) manteniendo calidad nítida.
Imágenes Vectoriales Accesibles
Aproveche el soporte incorporado de campos alt y title para asegurar que todas las imágenes SVG tengan metadatos de accesibilidad apropiados. Configure el campo para requerir texto alt para cumplimiento con estándares de accesibilidad.
SVG Seguros Generados por Usuarios
Al aceptar cargas de SVG de usuarios menos confiables, habilite la opción de sanitización para eliminar código potencialmente malicioso. Use sanitize_remote para también eliminar referencias externas que podrían filtrar datos.
Iconos Tematizables con CSS
Use la opción force_fill con renderizado en línea para crear iconos que adopten automáticamente el color del texto de su elemento padre. Perfecto para botones de icono o enlaces donde el icono debe coincidir con el color del enlace al pasar el cursor.
Tips
- Habilite tanto 'Sanitizar código SVG' como 'Eliminar referencias remotas' al aceptar cargas de SVG de usuarios no confiables para prevenir ataques XSS y fugas HTTP
- Use renderizado en línea cuando necesite manipulación CSS/JavaScript del SVG, pero use renderizado con etiqueta img para mejor rendimiento y almacenamiento en caché cuando no se necesita interacción
- La opción force_fill es particularmente útil para iconos que deben coincidir con el color del texto - establece fill='currentColor' en el elemento SVG
- Configure preview_image_max_width y preview_image_max_height en los ajustes del widget para asegurar que SVG grandes no abrumen el formulario de edición
- Para integración con Media, instale el módulo Media Library antes del submódulo SVG Image Field Media Bundle para obtener las configuraciones de formulario y visualización de media_library
- Se recomienda texto alt para accesibilidad - habilite y requiera el campo alt en los ajustes del campo para asegurar que todas las imágenes SVG tengan texto descriptivo
Technical Details
Troubleshooting 5
Después de actualizar a una versión que renombró la clase de fuente de medios (SVG.php a ScalableVectorGraphic.php), Git o Composer pueden fallar al aplicar el renombrado solo de mayúsculas/minúsculas. Elimine cualquier archivo SVG.php o Svg.php antiguo de svg_image_field/src/Plugin/media/Source/ y asegúrese de que ScalableVectorGraphic.php exista. Alternativamente, elimine y vuelva a requerir el módulo con Composer.
Verifique que el archivo SVG exista en el servidor. Si usa Stage File Proxy, el módulo automáticamente recurrirá a la salida con etiqueta img cuando el archivo no está presente localmente. También verifique que el SVG sea XML válido con un elemento raíz svg.
Asegúrese de que el archivo tenga el tipo MIME correcto (image/svg+xml o image/svg). Algunos servidores pueden detectar incorrectamente los tipos MIME de SVG. El archivo también debe ser XML válido con un elemento raíz svg para pasar la validación.
Los SVG pueden no mostrarse como miniaturas dependiendo de su procesador de imágenes y configuración de estilo de imagen. Consulte el issue de Drupal #3105482 para más información. El archivo SVG real se usa como fuente de la miniatura.
Asegúrese de que la opción inline esté habilitada en los ajustes del formateador. Verifique que el SVG no tenga atributos fill o style codificados que anulen su CSS. Use la opción force_fill para establecer fill a currentColor.
Security Notes 4
- El renderizado SVG en línea puede plantear riesgos de seguridad ya que los SVG pueden contener JavaScript. Solo habilite el renderizado en línea para campos donde usuarios confiables cargan contenido, o siempre habilite la opción de sanitización
- La opción de sanitización usa la biblioteca enshrined/svg-sanitize para eliminar código potencialmente malicioso incluyendo scripts, manejadores de eventos y otros vectores XSS
- Habilite sanitize_remote para eliminar referencias a recursos externos, previniendo fugas HTTP que podrían exponer información del usuario o usarse para rastreo
- El renderizado estándar con etiqueta img (no en línea) es inherentemente más seguro ya que el SVG se carga como un recurso de imagen en lugar de HTML en línea