Enabling the upload of SVG images.

Hi SirClickalot

I had the same problem and found a solution in the file "ckeditor5_test_module_allowed_image.module".
The type should be an IANA image media type Name, like it's explained in the mentioned file.

// Add a custom file type to the image upload plugin. Note that 'svg+xml'
// below should be an IANA image media type Name, with the "image/" prefix
// omitted. In other words: a subtype of type image.

So, you should replace your line:

$image_upload_plugin_definition['ckeditor5']['config']['image']['upload']['types'][] = 'svg';

by

$image_upload_plugin_definition['ckeditor5']['config']['image']['upload']['types'][] = 'svg+xml';

It should fix your problem.

Regards

@juagarc4 → brilliant, just what I needed, thank you!

Hi SirClickalot,

I close this ticket since the problem has been solved :-)

Regards

Automatically closed - issue fixed for 2 weeks with no activity.

i am using Ckeditor 5 with Drupal 10.4.1 and would like to use svg-images with the image plugin from ckeditor.
I tried the function above in my Sub-theme from claro but it is not possible to upload svg.
Where is to place the hook? Or did i need aditional configuration?

Hi lissy,

the function with the necessary change applied:

function MY_MODULE_ckeditor5_plugin_info_alter(array &$plugin_definitions): void {
  $image_upload_plugin_definition = $plugin_definitions['ckeditor5_imageUpload']->toArray();
  $image_upload_plugin_definition['ckeditor5']['config']['image']['upload']['types'][] = 'webp';
  $image_upload_plugin_definition['ckeditor5']['config']['image']['upload']['types'][] = 'svg+xml'; 
  $plugin_definitions['ckeditor5_imageUpload'] = new CKEditor5PluginDefinition($image_upload_plugin_definition);
}

should be placed into the file with extension ".module" of a custom module replacing the prefix "MY_MODULE" by the name of the module. Then you should enable the module and clear cache. No other configuration is needed.

This hook should be placed in a module since placing it in a theme won't work for Backend.

I hoe it can help you

Regards