SVG Image
Extends Drupal's standard Image field to support SVG file uploads and display without requiring a separate field type.
svg_image
Install
composer require 'drupal/svg_image:^3.2'
composer require 'drupal/svg_image:^3.0'
Overview
SVG Image module enhances Drupal's core Image field functionality by overriding the default image field widget and formatter to seamlessly support SVG (Scalable Vector Graphics) files. Instead of creating a separate field type for SVG images, this module allows you to simply add the 'svg' extension to your existing Image field settings.
The module automatically handles SVG files differently from raster images - it can either render them inline as <svg> tags for full CSS/JavaScript control, or as standard <img> tags for simpler usage. SVG files are sanitized using the enshrined/svg-sanitize library to prevent XSS attacks and other security vulnerabilities.
For sites using responsive images, the optional SVG Image Responsive submodule extends this functionality to the Responsive Image formatter as well.
Features
- Enables SVG file uploads through Drupal's standard Image field by adding 'svg' to allowed extensions
- Automatically bypasses image validation that would normally reject SVG files
- Renders SVG images either as inline <svg> tags or as <img> tags based on configuration
- Provides configurable width and height attributes specifically for SVG display
- Sanitizes SVG files using enshrined/svg-sanitize library to prevent XSS attacks
- Extracts and uses SVG dimensions from the file's width/height attributes
- Preserves SVG preview in the Image field widget during content editing
- Handles SVG files gracefully when image styles are applied (displays original with special class)
- Clean uninstall that removes 'svg' from field extensions and cleans up configuration
- Responsive image support through the SVG Image Responsive submodule
Use Cases
Logo and icon management
Use SVG Image for company logos, icons, and other vector graphics that need to scale cleanly across different screen sizes and resolutions. Add an Image field for logos, enable 'svg' extension, and use inline SVG rendering for CSS color customization.
Responsive hero images with vectors
Combine SVG illustrations with the Responsive Image formatter using the SVG Image Responsive submodule. The SVG will display at appropriate sizes based on the responsive image style's fallback settings while maintaining crisp vector quality.
Interactive graphics
Render SVG images inline (svg_render_as_image = false) to enable JavaScript interaction with SVG elements, CSS animations, and hover effects that aren't possible with IMG tag rendering.
Mixed raster and vector content
Use a single Image field that accepts both traditional raster images (jpg, png, gif) and SVG files. The module automatically handles each type appropriately - applying image styles to raster images while preserving SVG vector quality.
Secure SVG uploads
Allow content editors to upload SVG files without security concerns. The module sanitizes all SVG content using the enshrined/svg-sanitize library, removing potentially malicious scripts and external references.
Tips
- For best results, ensure your SVG files include width and height attributes in the root <svg> element
- Use inline SVG rendering (disable 'Render as IMG') when you need CSS control over colors or JavaScript interactivity
- Use IMG rendering when you just need simple display and want better caching behavior
- The 'no-image-style' class is added to SVGs displayed through image styles - use this for targeted CSS styling
- SVG files are sanitized on every render; for performance-critical sites with many SVGs, consider pre-sanitizing files
- When using with Media entities, configure the Image field on the Media type to allow SVG extensions
Technical Details
Hooks 6
hook_field_widget_info_alter
Replaces the core Image widget class with SvgImageWidget to enable SVG upload support
hook_field_formatter_info_alter
Replaces core Image and Image URL formatter classes with SVG-aware versions
hook_config_schema_info_alter
Adds SVG-specific settings to the image formatter configuration schema
svg_image_preprocess_image_style
Preprocessor that allows SVG images to display even when image styles are applied. Adds 'no-image-style' class for CSS targeting.
svg_image_is_file_svg
Helper function to check if a file entity is an SVG image based on MIME type
svg_image_get_image_file_dimensions
Gets image dimensions from a file. For SVG files, parses the XML to extract width/height attributes; defaults to 64x64 if not specified.
Troubleshooting 6
Ensure 'svg' is added to the allowed file extensions in the Image field settings (Field Settings tab when editing the field). The module adds SVG support but doesn't automatically add the extension to existing fields.
Set explicit width and height in the formatter settings under 'SVG Images dimensions (attributes)', or ensure your SVG file has width and height attributes defined in its root element.
SVG files cannot be transformed by image styles (resize, crop, etc.). The module displays the original SVG with a 'no-image-style' CSS class. Use CSS to control SVG dimensions, or set dimensions in the formatter settings.
Check if the SVG file was sanitized too aggressively. Complex SVGs with external references, scripts, or certain filter effects may be stripped. Try a simpler SVG or check server logs for errors.
Disable 'Render SVG image as <img>' in the formatter settings to render SVG inline. IMG tag rendering encapsulates the SVG and prevents direct DOM access to SVG elements.
The module's uninstall hook automatically removes 'svg' from field extensions and cleans up config. Clear caches after uninstall. If issues persist, manually check field configurations.
Security Notes 5
- All SVG files are sanitized using the enshrined/svg-sanitize library to prevent XSS attacks
- The sanitizer removes JavaScript, external references, and potentially dangerous elements from SVG files
- Security coverage is confirmed by Drupal.org's security advisory coverage
- Keep the enshrined/svg-sanitize dependency updated to receive security fixes (minimum version 0.22 required)
- Inline SVG rendering exposes SVG content directly in the DOM - ensure source SVGs are trusted or sanitization is sufficient