SVG Image
Extiende el campo Image estándar de Drupal para soportar la carga y visualización de archivos SVG sin requerir un tipo de campo separado.
svg_image
Install
composer require 'drupal/svg_image:^3.2'
composer require 'drupal/svg_image:^3.0'
Overview
El módulo SVG Image mejora la funcionalidad del campo Image del núcleo de Drupal al sobrescribir el widget y el formatter del campo de imagen predeterminado para soportar de manera transparente archivos SVG (Scalable Vector Graphics). En lugar de crear un tipo de campo separado para imágenes SVG, este módulo te permite simplemente agregar la extensión 'svg' a la configuración de tu campo Image existente.
El módulo maneja automáticamente los archivos SVG de manera diferente a las imágenes rasterizadas - puede renderizarlos en línea como etiquetas <svg> para control completo de CSS/JavaScript, o como etiquetas <img> estándar para un uso más simple. Los archivos SVG son sanitizados usando la biblioteca enshrined/svg-sanitize para prevenir ataques XSS y otras vulnerabilidades de seguridad.
Para sitios que usan imágenes responsivas, el submódulo opcional SVG Image Responsive extiende esta funcionalidad al formatter Responsive Image también.
Features
- Permite la carga de archivos SVG a través del campo Image estándar de Drupal agregando 'svg' a las extensiones permitidas
- Omite automáticamente la validación de imagen que normalmente rechazaría archivos SVG
- Renderiza imágenes SVG como etiquetas <svg> en línea o como etiquetas <img> según la configuración
- Proporciona atributos de ancho y alto configurables específicamente para la visualización de SVG
- Sanitiza archivos SVG usando la biblioteca enshrined/svg-sanitize para prevenir ataques XSS
- Extrae y usa las dimensiones SVG de los atributos width/height del archivo
- Preserva la vista previa del SVG en el widget del campo Image durante la edición de contenido
- Maneja archivos SVG correctamente cuando se aplican estilos de imagen (muestra el original con una clase especial)
- Desinstalación limpia que elimina 'svg' de las extensiones del campo y limpia la configuración
- Soporte de imagen responsiva a través del submódulo SVG Image Responsive
Use Cases
Gestión de logos e iconos
Usa SVG Image para logos de empresa, iconos y otros gráficos vectoriales que necesitan escalarse limpiamente a través de diferentes tamaños de pantalla y resoluciones. Agrega un campo Image para logos, habilita la extensión 'svg', y usa renderizado SVG en línea para personalización de color con CSS.
Imágenes hero responsivas con vectores
Combina ilustraciones SVG con el formatter Responsive Image usando el submódulo SVG Image Responsive. El SVG se mostrará en tamaños apropiados basados en los ajustes de respaldo del estilo de imagen responsivo mientras mantiene la calidad vectorial nítida.
Gráficos interactivos
Renderiza imágenes SVG en línea (svg_render_as_image = false) para habilitar la interacción de JavaScript con elementos SVG, animaciones CSS, y efectos hover que no son posibles con el renderizado de etiqueta IMG.
Contenido mixto rasterizado y vectorial
Usa un solo campo Image que acepta tanto imágenes rasterizadas tradicionales (jpg, png, gif) como archivos SVG. El módulo maneja automáticamente cada tipo apropiadamente - aplicando estilos de imagen a imágenes rasterizadas mientras preserva la calidad vectorial del SVG.
Cargas seguras de SVG
Permite a los editores de contenido subir archivos SVG sin preocupaciones de seguridad. El módulo sanitiza todo el contenido SVG usando la biblioteca enshrined/svg-sanitize, eliminando scripts potencialmente maliciosos y referencias externas.
Tips
- Para mejores resultados, asegúrate de que tus archivos SVG incluyan los atributos width y height en el elemento raíz <svg>
- Usa renderizado SVG en línea (deshabilita 'Renderizar como IMG') cuando necesites control CSS sobre colores o interactividad de JavaScript
- Usa renderizado IMG cuando solo necesites visualización simple y quieras mejor comportamiento de caché
- La clase 'no-image-style' se agrega a los SVGs mostrados a través de estilos de imagen - usa esto para estilización CSS dirigida
- Los archivos SVG son sanitizados en cada renderizado; para sitios críticos en rendimiento con muchos SVGs, considera pre-sanitizar los archivos
- Cuando uses con entidades Media, configura el campo Image en el tipo Media para permitir extensiones SVG
Technical Details
Hooks 6
hook_field_widget_info_alter
Reemplaza la clase del widget Image del núcleo con SvgImageWidget para habilitar el soporte de carga de SVG
hook_field_formatter_info_alter
Reemplaza las clases de los formatters Image e Image URL del núcleo con versiones compatibles con SVG
hook_config_schema_info_alter
Agrega ajustes específicos de SVG al esquema de configuración del formatter de imagen
svg_image_preprocess_image_style
Preprocesador que permite que las imágenes SVG se muestren incluso cuando se aplican estilos de imagen. Agrega la clase 'no-image-style' para targeting CSS.
svg_image_is_file_svg
Función auxiliar para verificar si una entidad de archivo es una imagen SVG basándose en el tipo MIME
svg_image_get_image_file_dimensions
Obtiene las dimensiones de imagen de un archivo. Para archivos SVG, analiza el XML para extraer los atributos width/height; por defecto 64x64 si no se especifica.
Troubleshooting 6
Asegúrate de que 'svg' esté agregado a las extensiones de archivo permitidas en la configuración del campo Image (pestaña Configuración del Campo al editar el campo). El módulo agrega soporte SVG pero no agrega automáticamente la extensión a campos existentes.
Establece ancho y alto explícitos en los ajustes del formatter bajo 'Dimensiones de imágenes SVG (atributos)', o asegúrate de que tu archivo SVG tenga los atributos width y height definidos en su elemento raíz.
Los archivos SVG no pueden ser transformados por estilos de imagen (redimensionar, recortar, etc.). El módulo muestra el SVG original con una clase CSS 'no-image-style'. Usa CSS para controlar las dimensiones del SVG, o establece las dimensiones en los ajustes del formatter.
Verifica si el archivo SVG fue sanitizado de manera muy agresiva. SVGs complejos con referencias externas, scripts o ciertos efectos de filtro pueden ser eliminados. Intenta un SVG más simple o revisa los logs del servidor para errores.
Deshabilita 'Renderizar imagen SVG como <img>' en los ajustes del formatter para renderizar SVG en línea. El renderizado de etiqueta IMG encapsula el SVG y previene el acceso directo del DOM a los elementos SVG.
El hook de desinstalación del módulo elimina automáticamente 'svg' de las extensiones del campo y limpia la configuración. Limpia los caches después de la desinstalación. Si los problemas persisten, verifica manualmente las configuraciones del campo.
Security Notes 5
- Todos los archivos SVG son sanitizados usando la biblioteca enshrined/svg-sanitize para prevenir ataques XSS
- El sanitizador elimina JavaScript, referencias externas y elementos potencialmente peligrosos de los archivos SVG
- La cobertura de seguridad está confirmada por la cobertura de avisos de seguridad de Drupal.org
- Mantén la dependencia enshrined/svg-sanitize actualizada para recibir correcciones de seguridad (versión mínima 0.22 requerida)
- El renderizado SVG en línea expone el contenido SVG directamente en el DOM - asegúrate de que los SVGs fuente sean confiables o que la sanitización sea suficiente