Placeholder background-image SVG has an invalid property

[robzor]

Describe the bug

When using the pictureTag() function, the placeholder SVG code appears to have an invalid property according to the Chrome dev tools.

An example of the outputted tag:

<img class="lazyload" src="<img url here>" width="1440" height="1223" alt=" " style="background-image: url(data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%271440%27 height=%271223%27 style=%27background:%23CCC%27 /%3E); background-size: cover;" loading="lazy">

To reproduce

Example code that triggers the issue:

{{ tiCardImage.imageTransformMax.pictureTag()
                        .pictureAttrs({
                            'class': 'ti-card__image',
                        })
                        .imgAttrs({
                            'alt': tiCardImage.alt ??? ' ',
                        })
                        .loadingStrategy('lazy')
                        .render() }}

Expected behaviour

No error in Chrome for the SVG tag.

Screenshots

Versions

• Plugin version: 5.0.1
• Craft version: 5.2.0
• Hosting: Servd

[khalwat]

Addressed in the above commits.

Interestingly, I had a meticulously-written function just to do this: https://github.com/nystudio107/craft-imageoptimize/blob/develop-v5/src/services/OptimizedImages.php#L425 that was based on this article:

https://codepen.io/tigt/post/optimizing-svgs-in-data-uris

...but apparently, it was wrong, or browsers became more strict. Because replacing %20 with a is apparently what was breaking the style in Chrome.

Craft CMS 3:

You can try it now by setting your semver in your composer.json to look like this:

    "nystudio107/craft-imageoptimize": "dev-develop as 1.6.55”,

Then do a composer clear-cache && composer update

…..

Craft CMS 4:

You can try it now by setting your semver in your composer.json to look like this:

    "nystudio107/craft-imageoptimize": "dev-develop-v4 as 4.0.9”,

Then do a composer clear-cache && composer update

…..

Craft CMS 5:

You can try it now by setting your semver in your composer.json to look like this:

    "nystudio107/craft-imageoptimize": "dev-develop-v5 as 5.0.2”,

Then do a composer clear-cache && composer update

[robzor]

Thanks!