Pimcore: Pimcore renders invalid HTML for SVG image with image thumbnail

[julmot]

Bug Report

When using an image thumbnail to scale an SVG image with the following configuration:

Note that it has enabled Force <picture> HTML tag (to make it consistent with non-SVG images).

And calling it in Twig like:

pimcore_image('image', {
  removeAttributes: ['width', 'height'],
  class: 'image__img text-image-left-right__image',
  thumbnail: 'three_column_text_image_svg',
  cacheBuster: true,
})

I'm getting an invalid output:

<picture data-alt="" data-default-src="/cache-buster-1585728835/content/CMS/Illustrationen%20USP%27s/Preis.svg">
    <source srcset="/cache-buster-1585728835/content/CMS/Illustrationen%20USP%27s/Preis.svg 1x, /cache-buster-1585728835/content/CMS/Illustrationen%20USP%27s/Preis.svg 2x" type="image/webp">
    <source srcset="/cache-buster-1585728835/content/CMS/Illustrationen%20USP%27s/Preis.svg 1x, /cache-buster-1585728835/content/CMS/Illustrationen%20USP%27s/Preis.svg 2x" type="image/png">
    <img class="image__img text-image__image" alt="" src="/cache-buster-1585728835/content/CMS/Illustrationen%20USP%27s/Preis.svg">
</picture>

The problem here is, that:

• An SVG image should not have high res nor low res alternatives. This currently causes an issue showing the image in @2x in Chrome and @1x in Firefox for me.
• Furthermore the type is invalid, an image does not have the type ìmage/png nor image/webp.

When disabling Force <picture> HTML tag I'm getting a single image without high res or low res, which is correct. But I want to have the <picture> tag to be consistent with rastered images for styling purposes.

Expected behavior

Rendering SVG images with image thumbnails should not cause high res or low res alternatives, nor should it cause invalid types.

Actual behavior

It does.

Additional Information

Maybe I'm wrong, but I also think cacheBuster: true isn't working for SVG images. I'm still getting the URL without cache-buster prefix when calling .getSrc() or .getThumbnail()

[brusch]

Cache buster works for me, used the following code:

{{ pimcore_asset(368).thumbnail('bernie').html({
    cacheBuster: true
})|raw }}

[NiklasBr]

Furthermore the type is invalid, an image does not have the type ìmage/png nor image/webp.

<img> does not but <source> does.

[brusch]

@NiklasBr what @julmot actually meant is that:

😉

[NiklasBr]

:D I thought it was a general comment: "An image does not have the type..." which of course it can have, not specific to this .svg bug