Media Module: How to enable SVG files

Question

I can currently upload with an Image field for SVG. I am using the SVG image module.

I just installed the Media module so I can use the Media library functionality. However when I add a new Image using Add Media. I am getting the error message I was having problems with before.

• Only files with the following extensions are allowed: png gif jpg jpeg.

Not sure where to resolve this. Please advise thanks.

Answer 1

You can use SVG Image Field module with Drupal 8 and the new core Media module.

1. Enable Media module and the experimental Media Library module both of which are found in Drupal >=8.7 core.
2. Download and enable SVG Image Field and apply to it the patch from Issue #3053011.
3. Go to /admin/structure/media and click the "Add Media Type" button.
4. For the Media Type Name specify 'SVG'.
5. For the Media source select SVG from the dropdown.
6. In the field mappings map Name to Name (the only option in the dropdown).
7. Click save. Then proceed to configure the Form Display and the Display for the Default and Media Library view mode at /admin/structure/media/manage/svg/form-display and /admin/structure/media/manage/svg/display respectively. You'll most likely want to just enable the "SVG" field, and disable the rest of the fields. The default display you can choose to use an inline SVG option.
8. Add a Media reference (Entity reference) field to your node types and configure it to allow the SVG bundle type. Optionally, enable other bundle types as well, like Image if you want to allow both images and SVGs in the same slot).
9. Go create a node, and click the "Add media" link.
10. Notice that the Media Library loads with a vertical tab for each kind of media type bundle you enabled in step 7 on your node configuration screen.

If you're still on the fence about how to choose the right SVG media module from Drupal 8 contrib, you may find my comparison of the 3 modules helpful to guide your decision making:

https://drupal.stackexchange.com/a/280837/3167

Answer 2

Update regarding this issue: As of today, SVG Image module works perfectly with Media Library functionality as well.

Answer 3

There has been some discussion of this on Drupal.org:

https://www.drupal.org/project/file_entity/issues/2458377

This is most likely the solution to your problem.

https://www.drupal.org/project/media/issues/2482859

This is a warning to use caution when allowing users to upload SVG files to your website, since they can contain malicious JavaScript.

If you do not know and trust all the users with the permission to upload files to your site, you might want to consider treating SVGs like executable PHP and JavaScript source code on your Drupal site, and manage them in version control instead of with the Media module to prevent Cross-Site Scripting attacks.