Broken SVG returned if not edits specified and Auto-WebP enabled

[marco910]

Describe the bug
If I'm requesting an SVG via the Image Handler and do not specify any edits to request (because I want to get the original SVG) I'm getting a broken WebP/SVG image as a response. (Broken means in this case that the SVG isn't display. Instead, a message appears that the image contains errors.) If I try to request the SVG with a browser, that doesn't support WebP, such as Safari, I'm getting the correct SVG with no problem.

To Reproduce

• Enable Auto-WebP in the Lambda config
• Upload a SVG file to S3
• Request the SVG with CloudFront from the bucket without specifying edits
• Use Chrome or Firefox

Expected behavior
If I'm requesting a SVG via the Image Handler and do not specify any edits to request I want to get the original SVG and not a WebP. In browsers such as Safari, which do not support WebP, I'm getting the correct SVG.

Please complete the following information about the solution:

• Version: v5.1.0
• Region: eu-central-1
• Was the solution modified from the version published on this repository? No
• Have you checked your service quotas for the services this solution uses?
• Were there any errors in the CloudWatch Logs? No, the response code is 304 and in CloudWatch no errors are logged.

Screenshots
Example SVG: https://images.feicht.media/99999/99999-9-20200927_website_ui-ux.svg

[beomseoklee]

@marco910 Thanks for contacting us, and I'm sorry for your inconvenience. I recognized the issue, and the issue is related to WebP. It changes the type to WebP when WebP is supported on the browser. We'll fix this issue in the next update. Meanwhile, if you want to fix this one as soon as possible, you can fix the source code something like this.

https://github.com/awslabs/serverless-image-handler/blob/6a98ad9ace10a9a55c3112d622cdeea86853b017/source/image-handler/image-request.js#L82-L87

if (this.ContentType !== 'image/svg+xml' || this.edits.toFormat || this.outputFormat) {
    let outputFormat = this.getOutputFormat(event);
    if (this.edits && this.edits.toFormat) {
        this.outputFormat = this.edits.toFormat;
    } else if (outputFormat) {
        this.outputFormat = outputFormat;
    }
}

Then, it will change the SVG files only when it needs to change the output format.

[marco910]

@beomseoklee Perfect, now it's working. Thanks for your help!

[G-Lenz]

We have added the above fix to v5.2.0.

[mustakimkr]

We have added the above fix to v5.2.0.

@G-Lenz I'm using v6.0.0 but It's still producing an error.

{ "message": "Internal error. Please contact the system administrator.", "code": "InternalError", "status": 500 }

[chroiss]

The same for me with version v6.0.0.

It seems that you have to provide empty edits :

{"bucket":"YOUR_BUCKET","key":"sample.svg","edits":""}

At least it is working for me then.