Module Description
This module adds a new field, widget, and formatter that allow Vector files with the .svg extension to be uploaded and managed by Drupal. Support for the Media Library in Drupal core as well as Acquia Site Studio are included as submodules.
The primary feature set allows configuring a specialized image field to render an <img> tag with alt/title text and custom image size overrides. Alternatively, there is the ability to inject inline SVG markup directly into the page, optionally running a sanitizer to prevent XSS attacks, with configurable options to override the image dimensions and fill color — ideal for SVG icons.
Architecture and Approach This module provides a completely new field type, separate from Drupal core image and file fields because vector images have little use for Drupal's traditional raster image tooling like image style handlers, optimization pipelines, WebP derivatives, or Responsive Image sets. In a similar fashion, the module advocates the use of a new Media Bundle for vector images, separate from the raster image Media Bundle provided by Drupal core.
The Media Bundle submodule
The Media Bundle submodule provides a new Vector Image media type, preconfigured to work seamlessly with the Media Library in Drupal core. Specifying which kinds of images to allow in any media reference field is as easy as clicking the appropriate checkboxes.
If your site is using Acquia Site Studio, installing this submodule will also import additional components specifically to help your content creators start working with vector images right away.
Requirements The Image and, optionally, the Media and Media Library modules are all provided by Drupal core. Additionally, this module optionally relies on the svg-sanitize library to ensure no malicious code is contained in upload SVG files.
Installation
* Install module as usual via Drupal UI, Drush or Composer.
* Go to "Extend" and enable the "SVG image field" module.
Configuring an SVG Image field
* Add "SVG Image" field to your Content Type or Taxonomy Vocabulary.
* Go to the "Manage display" → SVG Image Field Formatter settings and customize the settings, to output the SVG inline and sanitize the code to prevent XSS attacks, apply specific dimensions, force the fill to currentColor.
Similar projects and how they are different SVG Formatter
* There are in general more limitations with this module, and several gotchas where a mis-configuration can produce unintended consequences, and at worst break a site.
* There is no way to set custom alt text on image because it uses file field. File field does not support alt text at the database storage level.
* Site builders must add svg extension in file field settings and select a field formatter, which is not entirely intuitive.
* If end users upload a non-svg file it will break the display.
* if end users upload png and selects inline output at formatter settings it will break the display.
* It does not have a preview image feature upon file upload.
The SVG Image Field module on the other hand has greater stability by way of fewer required configurations and testing. You simply click "Add field", set field type to "Svg Image" and done.
SVG Image
Adds SVG support to your existing image fields, but this requires reconfiguring them, and may mean accepting compromises so that your fields will properly support both SVG and raster images. Also, using one field for both raster and SVG images makes it harder to control what kind of image will be placed. Using SVG Image Field allows your site to separate the two, so the use of each can be easily enforced when needed, and fully optimized.
The primary feature set allows configuring a specialized image field to render an <img> tag with alt/title text and custom image size overrides. Alternatively, there is the ability to inject inline SVG markup directly into the page, optionally running a sanitizer to prevent XSS attacks, with configurable options to override the image dimensions and fill color — ideal for SVG icons.
Architecture and Approach This module provides a completely new field type, separate from Drupal core image and file fields because vector images have little use for Drupal's traditional raster image tooling like image style handlers, optimization pipelines, WebP derivatives, or Responsive Image sets. In a similar fashion, the module advocates the use of a new Media Bundle for vector images, separate from the raster image Media Bundle provided by Drupal core.
The Media Bundle submodule
The Media Bundle submodule provides a new Vector Image media type, preconfigured to work seamlessly with the Media Library in Drupal core. Specifying which kinds of images to allow in any media reference field is as easy as clicking the appropriate checkboxes.
If your site is using Acquia Site Studio, installing this submodule will also import additional components specifically to help your content creators start working with vector images right away.
Requirements The Image and, optionally, the Media and Media Library modules are all provided by Drupal core. Additionally, this module optionally relies on the svg-sanitize library to ensure no malicious code is contained in upload SVG files.
Installation
* Install module as usual via Drupal UI, Drush or Composer.
* Go to "Extend" and enable the "SVG image field" module.
Configuring an SVG Image field
* Add "SVG Image" field to your Content Type or Taxonomy Vocabulary.
* Go to the "Manage display" → SVG Image Field Formatter settings and customize the settings, to output the SVG inline and sanitize the code to prevent XSS attacks, apply specific dimensions, force the fill to currentColor.
Similar projects and how they are different SVG Formatter
* There are in general more limitations with this module, and several gotchas where a mis-configuration can produce unintended consequences, and at worst break a site.
* There is no way to set custom alt text on image because it uses file field. File field does not support alt text at the database storage level.
* Site builders must add svg extension in file field settings and select a field formatter, which is not entirely intuitive.
* If end users upload a non-svg file it will break the display.
* if end users upload png and selects inline output at formatter settings it will break the display.
* It does not have a preview image feature upon file upload.
The SVG Image Field module on the other hand has greater stability by way of fewer required configurations and testing. You simply click "Add field", set field type to "Svg Image" and done.
SVG Image
Adds SVG support to your existing image fields, but this requires reconfiguring them, and may mean accepting compromises so that your fields will properly support both SVG and raster images. Also, using one field for both raster and SVG images makes it harder to control what kind of image will be placed. Using SVG Image Field allows your site to separate the two, so the use of each can be easily enforced when needed, and fully optimized.
Module Link
Project Usage
15062
Security Covered
Covered By Security Advisory
Version Available
Production
Module Summary
This module aims to solve the problem of uploading and managing Vector files with the .svg extension in Drupal, providing support for Media Library in Drupal core and Acquia Site Studio, with features like rendering specialized image fields and injecting inline SVG markup with configurable options.
Data Name
svg_image_field
OPENAI CHATBOT
OPENAI CHATBOT
