Drupal - Selecting an SVG as an Image Field value

AFAIK the jpg/png/gif limitation is hardcoded in the image field, you can't solve this (only) with configuration.

SVG Image allows .svg files in core's image field. You can use the standard image formatter with it (or better: you must use the standard image formatter, it will not work with Focal Point or similar)

SVG formatter uses the file field and provides an SVG formatter for the file field.

Both also work with media entities, but I've not tested them with IMCE yet.


SVG Image Field is an alternative to SVG Formatter and SVG Image that is worth a try.

Some of the advantages of this module over these other two:

  • Unlike SVG Formatter, you may set custom alt text on SVGs. SVG Formatter relies on core file field under the covers, which does not support alt at the database schema level.
  • Unlike SVG Image module, you may still use Crop API, Focal Point, and other raster-based image modules on your normal image fields without affecting SVGs because SVG Image Field provides a separate field type and doesn't alter or touch regular core image field. The SVG Image module modifies core image fields to allow SVG files to be uploaded along side raster-image files like PNG, JPG, GIF, but comes with some costly tradeoffs and limitations.
  • Far less configuration required out of the box: With SVG Formatter and SVG Image modules, the site builder must take additional steps to configure their fields to display all images appropriately, eg adding SVG extension to the file field settings, selecting a field formatter, playing with and testing formatter settings with different image types to see what breaks.
  • Less end-user confusion and error states when trying to combine with other image types: With SVG Formatter, if user uploads non-SVG file it will break output. This isn't possible with SVG Image Field, because the file extensions are limited to only SVGs.
  • Similar to the above, with SVG Formatter, if user uploads png and the field is configured with an inline output as the formatter, it will break output.
  • SVG Image Field has an image preview feature on file upload out of the box. SVG Formatter does not.
  • For existing installations, there are fewer opportunities to break the site with a misconfiguration. SVG Image Field solves the specific SVG use case, and doesn't interfere with other existing image field configs.

If you happen to be using Media in core, and Media Library check out my other post which explains how to set up SVG Image Field with Media module to end up with a single Media field on your node that can reference either Images or SVGs.

Tags:

Media

8