3 Drupal Modules to Get SVGs into Your Content Types
SVGs are ideal for the web due to their low file sizes and crisp appearance, making them perfect for icons, logos, and illustrations. However, working with them is often more complicated than typical file formats like JPG, PNG or GIF. Out of the box, Drupal’s default image and file fields don’t support the use of SVGs. Here are 3 Drupal modules to help you quickly and easily get SVGs into your content types.
UPDATE: SVG support is now in Drupal Core. Use it. If you find any bugs with its implementation or run into any edge cases, please file an issue against core.
1. SVG Image (TXC Recommended)
The SVG Image module makes things easy by equipping the core Image Field with the ability to accept SVG files. This can be easily configured by adding the .SVG file extension to the list of allowed types in your image field configuration settings. This module is great since you don’t have to add a new field to use SVGs on your site. The SVG Image module currently has 2,440 users and over 32k downloads.
2. SVG Image Field
The SVG Image Field module adds a completely new “SVG Image” field, widget, and formatter. After installing and enabling this module, all you need to do is add the “SVG Image” field to your content type instead of an image or file field. The SVG Image Field currently has 1,060 users and around 14k downloads.
3. SVG Formatter
SVG Formatter makes use of the core File Field (contrasted with the SVG Image module which uses the core Image Field), allowing it to accept SVG files. Once installed, you can select the “SVG formatter” under “Format” in your Manage display settings on any fieldable content type. Much like the SVG Image module, the user will need to add the SVG file type extension in the field configuration settings. The SVG Formatter currently has 1,245 users and over 7k downloads.
Additional Features All 3 Modules Share
- Ability to select width and height of the image in formatter settings
- Ability to render SVG image as <img> or <svg> tags.
With any of these modules, it’s recommended that the pixel dimensions of your SVG are set within the SVG itself, as the height and width attributes offered by these modules apply to the field as a whole (which may not be desired in all use cases). Otherwise, styling with CSS will definitely be necessary.
The Future of SVG Support in Drupal
Ideally, SVG support should be integrated into core. In fact, at the time of writing, we discovered there is currently an open core issue that’s working towards allowing image fields to use any file extension supported by the currently used image toolkit. This could even mean support for using PDFs in image fields. The foundation of this functionality was added to core 8.5, but in our testing, it wasn’t yet working in any usable form—so one of the above modules is still required.
https://www.drupal.org/project/drupal/issues/1014816
For information on creating a better SVG check out this article here: