feat(qwik-city): allow customizing SVGO options of image plugin

[hbendev]

Overview

Allow customizing SVGO options of image optimization plugin.

What is it?

• Feature / enhancement
• Bug
• Docs / tests / types / typos

Description

SVGO has a sensible defaults, which are used by qwik, but configurability from developer space is missing, and the default config can cause some unexpected results.

Use cases and why

For example, objects defined inside can collide with each other, causing unexpected references to be loaded. See reproduction here: https://github.com/hbendev/qwik-svg-render-bug/tree/571a2057914b334a3a3220865868e85a7eb731c3.

These modifications allow the 'prefixIds' plugin to be used, and in turn, SVGO prefixes the ids with the svg file's name, making them all unique. See the issue resolved here: https://github.com/hbendev/qwik-svg-render-bug/tree/bf040e67ec2e618a8b778859fa78ffdf477371f7 (requires rebuliding qwik based on this source branch, and linking it to the reproduction package).

Checklist:

• My code follows the developer guidelines of this project
• I have performed a self-review of my own code
• I have made corresponding changes to the documentation
• Added new tests to cover the fix / functionality

[netlify]

👷 Deploy request for qwik-insights pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	600c973

[hbendev]

There's a long discussion in SVGO about doing the above - making all ids unique - by default in SVGO-land, but using plugins is suggested there by the authors. In my opinion it's worth adding 'prefixIds' to qwik-city for all users by default, because here it's used for optimizing the files to be used specifically in browsers. I'm happy to do a follow-up PR for that, if you agree.

[hbendev]

I suspect some of the examples listed in qwik's home page might be avoiding optimizing svgs using the custom ?jsx loader due this particular problem as well.

[wmertens]

[wmertens]

Nice, thanks!

[wmertens]

@hbendev

In my opinion it's worth adding 'prefixIds' to qwik-city for all users by default, because here it's used for optimizing the files to be used specifically in browsers. I'm happy to do a follow-up PR for that, if you agree.

What is the real-world impact of this?

[hbendev]

Hi @wmertens

Here's a shortened quote from the above mentioned issue to quickly sum rationale behind the suggestion up.

SVGO when cleaning up IDs [...] does not have a concept of "other svgs" - which means if you minified 100 svgs, they would all end up having the id of 'a' which means they're next to useless to be embedded into webpages.

Since qwik is meant to be used to render webpages, and SVGO is used to optimize SVGs that are often rendered together, we should take care of generating unique references, instead of the users. By enabling the provided prefixId plugin, and passing the path of the file to SVGO (which I added in this PR), all ids would be unique as long as their file names are unique. I think it makes sense in most cases to assign different names to SVGs, so almost no-one would face this issue going forward. If one still has conflicts, they would still be able to work around this by extending the configuration further per the above modifications.

A very minor drawback is that all the inlined SVGs that use any variables via <defs /> would be a few bytes larger.

Again, here's a minimal reproduction: https://github.com/hbendev/qwik-svg-render-bug, or you can also see the issue using the SVG I used for the unit test.