SVG Image

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.

Install

Drupal 11, 10 v3.2.2

composer require 'drupal/svg_image:^3.2'

Drupal 9 v3.0.2

composer require 'drupal/svg_image:^3.0'

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

Dependencies

Image Required

Related Projects

Responsive Image (drupal:responsive_image)

The SVG Image Responsive submodule integrates with core Responsive Image module to allow SVG files in responsive image formatters while maintaining vector quality

Media Core

Works with Media module by extending Image field support - configure your Media type's Image field to accept SVG extensions

Hooks

Hook	Description
`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

SVG file upload is rejected

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.

SVG appears with incorrect dimensions or very small

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.

Image style transformations don't apply to SVG

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.

SVG content is not displaying (blank space)

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.

CSS/JavaScript can't access SVG elements

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.

After uninstalling, fields show errors

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

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

SVG Image `svg_image`