Ckeditor5: Support uploading SVG images

[davidpolberger]

🐞 Is this a bug report or feature request? (choose one)

• Feature request

💻 Version of CKEditor

v1.0.0-alpha.2

📋 Steps to reproduce

1. Browse to https://ckeditor5.github.io/
2. Attempt to upload an SVG file.

✅ Expected result

The uploaded image should be properly displayed.

❎ Actual result

Nothing happens, or only the textual file URL appears.

📃 Other details that might be useful

CKEditor 4 does not appear to support SVG files either. However, SVG's growing popularity may make it an attractive format to support.

[Reinmar]

Great idea. Thanks for reporting!

On CKEditor 5 side:

• https://github.com/ckeditor/ckeditor5-image/blob/42ad41bea2e406233c17ce8a319fdd66b1ba495d/src/imageupload/imageuploadui.js#L38 – the upload image button already supports all images.
• https://github.com/ckeditor/ckeditor5-image/blob/42ad41bea2e406233c17ce8a319fdd66b1ba495d/src/imageupload/utils.js#L18 – but then the ImageUpload feature will reject an SVG. So we need to change that.

But in order to make SVGs work with Easy Image we'll also need to add support for them in CKEditor Cloud Services.

[Maqsyo]

Is here any progress?

[Reinmar]

No, we didn't look into this. But it seems to be a trivial change assuming that the backend that you're using will support SVGs. Easy Image doesn't support them AFAIK. CKFinder should work fine (may require some configuration). If you use your own backend then it's basically up to you.

So, anyway, I think we could try to add SVGs to https://github.com/ckeditor/ckeditor5-image/blob/42ad41bea2e406233c17ce8a319fdd66b1ba495d/src/imageupload/utils.js#L18 and see what happens. It may be a quick win.

[jodator]

Looks like it's working fine with EasyImage. It will work with CKFinder as well (you only need to enable SVG file type in the CKFinder backend configuration).

[jodator]

And the model contents:

[jodator]

It looks like adding this will work but it is a potential security risk if image backend does not properly filter SVG files. Also when thinking about any future or existing image format that might or might not be supported on the backend I think that the best way is to provide a configuration option for image upload for extending supported image types.

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        image: {
            toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ],
            upload: {
                types: [ 'jpeg', 'png', 'gif', 'bmp', 'svg+xml' ]
            }
        }
    } );

Underneath it will create the current RegExp:

https://github.com/ckeditor/ckeditor5-image/blob/8fa4acf7850e958526d0f049899f88cb91282a74/src/imageupload/utils.js#L19

The default value will be:

[ 'jpeg', 'png', 'gif', 'bmp', 'webp', 'tiff' ]

I'm not sure is the tiff should be enabled by default so we might skip it and only add the webp to default image subtypes.

ps.: Here is a full list of possible image subtypes

[Reinmar]

I think we can go this way if it will also affect this place: https://github.com/ckeditor/ckeditor5-image/blob/42ad41bea2e406233c17ce8a319fdd66b1ba495d/src/imageupload/imageuploadui.js#L38

Otherwise, this configuration is a bit redundant because the backend will need to do the same check and should throw if it doesn't want to support for example SVGs. So, the backend gives you the final confirmation (once it receives the file). The config option will affect the UI, so will give you immediate result (which files are available in the native file browser).

[jodator]

Yeah... this should go there as well: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Limiting_accepted_file_types so we should construct the accept key according to allowed image types... or allow all image types always (this is image would check for image/ only and left it to the server.

ps.: I'm for the configuration option to make CKEditor not upload SVG by default:

1. Add configuration option image.upload.types
2. Use image.upload.types in ImageUploadUI to browse for compatible file types only.