SVG Formatter

SVG Formatter module provides support for using SVG images on your website.

The standard image field in Drupal 8/9/10 doesn't support SVG images. This module adds a new formatter for the file field, which allows files with any extension to be uploaded. In the formatter settings, you can set the default image size and enable alt and title attributes. If you want to add some CSS and Javascript magic to your SVG images, then use the inline SVG option.

You can also use this module in combination with SVG Image module. If that module is installed, you can use the SVG Formatter formatter for the image field.

Installation

Composer

composer require drupal/svg_formatter

Drush

drush en svg_formatter -y

How to use it?

Drupal 8 and SVG images - Blog post describing how to use the module

Screencast: https://youtu.be/ctussLn-2Ck

1. Add a file field to your content type, taxonomy, or any other entity type, and add svg to the allowed file extensions.
2. Go to the 'Manage display' and change the field format to 'SVG Formatter'.
3. Set image dimensions if you want and enable or disable attributes.