3

I have a Content Type, News, with an Image Field, News Icon.

When the field settings are viewed at /admin/structure/types/manage/news/fields/node.news.field_news_icon

I have supplied SVG as one of the allowed types. I have also tried allowing only SVG.

enter image description here

We also have IMCE in use so I have SVG set up in the IMCE config like so at /admin/config/media/imce I have also tried using a list separated by spaces including SVG.

enter image description here

The Widget settings for the field at /admin/structure/types/manage/news/form-display allow for the IMCE manager to be enabled. I have tried disabling but it did not resolve the issue.

enter image description here

The widget displays and lists allowed types but no SVG. enter image description here

IMCE allows upload of SVGs but when selecting one as the news_icon I get

enter image description here

The normal (non-IMCE) file browser gives the following when an SVG is selected for upload:

enter image description here

Is there a deeper setting I am missing to get SVG included in the list of allowed extensions for use as an Image Field value?

3

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.

  • 1
    Yes, adding the file extension won't do anything. It is disabled in core I believe due to security. But there are modules that will allow it. – Kevin May 14 '18 at 18:10
  • Thank you! Will post back here re IMCE for future readers after I get all working – jerrygarciuh May 14 '18 at 21:48
  • Seems SVG wandered into core, currently 8.6.x-dev (not backported to 8.5.x-dev yet): drupal.org/project/drupal/issues/1014816. Though I couldn't apply the patch against the current 8.6.1 release. – leymannx Sep 24 '18 at 8:18
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.