SVG files inconsistently rasterized to WebP when "Convert images to WebP" is enabled

DeltaHF

DeltaHF

Well-known member
Affected version
2.3
The image-to-WebP conversion feature in XenForo 2.3 incorrectly rasterizes certain valid SVG files, causing the loss of their vector data. The behavior is inconsistent and appears to be triggered when an SVG file contains only a single color without an explicit transparent background.

This issue can be observed with two nearly identical SVG files, where the only difference is the fill color. An SVG with a blue fill is preserved correctly, while an SVG with a white fill is rasterized into a WebP image. I am using the GD image library and have not tested this with ImageMagick, but this can be reproduced here on the official forums as well.

I have provided sample SVG files which are affected by this below. The two SVG files are identical aside from fill="#fff" in WHITE.svg and fill="#00f" in BLUE.svg. The original files are included together in the zip file to show them before processing. As you can see from the resulting attachments, WHITE.svg has been compressed while BLUE.svg retains its original file size. You can also download and view the files in a text editor to confirm the processing.

SVGs should be excluded from the WebP conversion pipeline, as users would be uploading SVGs specifically for their vector properties.
 

Attachments

Most likely not a bug as XenForo does not treat SVG as image, do you use an Add-on for this?
If so you should probably ask for support the author for support.

Server side XenForo code does not treat SVG as image, but client-side code may.
JavaScript: 
if (file.type === 'image/gif' || file.type === 'image/webp')
{
        // browsers do not support animated GIFs or WebPs
        resolve(file)
        return
}

should probably be changed to smth. like
JavaScript: 
if (file.type === 'image/gif' || file.type === 'image/webp' || file.type === 'image/svg+xml')
{
    // browsers do not support animated GIFs or WebPs and rastering SVG is nonsense
    resolve(file)
    return
}
 
Last edited:
Yep, you're right @Kirby. Disabled JavaScript and both files upload fine, as confirmed here in the test forum.

It looks like the bug is in attachment_manager-compiled.js:

JavaScript: 
// ... inside XF.ImageTools.resize ...
return new Promise((e, f) => {
    if (a.type.startsWith("image/"))
        if ("image/gif" === a.type || "image/webp" === a.type) // THIS IS THE PROBLEM
            e(a);
        else {
            // This 'else' block contains the code that
            // draws the SVG to a canvas and rasterizes it.
        }
    else
        f(Error("The file is not an image."))
});

That second if needs to include SVGs:

JavaScript: 
if ("image/gif" === a.type || "image/webp" === a.type || "image/svg+xml" === a.type)
 
Back
Top Bottom