`experimental.svgOptimizer` does not pass the file path to SVGO, so `prefixIds` uses the same prefix for every file

[myakura]

Astro Info

Astro                    v7.2.2
Vite                     v8.2.1
Node                     v24.19.0
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

svgoOptimizer() calls SVGO without the path option:

// packages/astro/src/assets/svg/svgo.ts
optimize: (contents) => optimize(contents, config).data,

So SVGO plugins that derive a per-file value from the path cannot work. With prefixIds, every file falls back to SVGO's default prefix, and ids from different SVG files collide once they are inlined on the same page.

In the reproduction, one.svg and two.svg each define a gradient with id="a" — the id SVGO's own cleanupIds plugin emits. Both become prefix__a, so the second definition is unreachable and both squares render red:

<svg viewBox="0 0 24 24"><defs><linearGradient id="prefix__a"><stop offset="0" stop-color="red" /></linearGradient></defs><rect width="24" height="24" fill="url(#prefix__a)" /></svg>
<svg viewBox="0 0 24 24"><defs><linearGradient id="prefix__a"><stop offset="0" stop-color="blue" /></linearGradient></defs><rect width="24" height="24" fill="url(#prefix__a)" /></svg>

parseSvg() in packages/astro/src/assets/svg/utils.ts already has path in scope — it uses it for the CannotOptimizeSvg error message — but does not forward it to svgOptimizer.optimize().

What's the expected result?

Prefixes derived per file. Running SVGO directly with a path produces exactly that:

optimize(contents, { path: 'src/icons/one.svg', plugins: [{ name: 'prefixIds' }] }); // id="one_svg__a"
optimize(contents, { path: 'src/icons/two.svg', plugins: [{ name: 'prefixIds' }] }); // id="two_svg__a"

Link to Minimal Reproducible Example

https://github.com/myakura/test--astro-v7-svgo-prefixids

Built output: https://myakura.github.io/test--astro-v7-svgo-prefixids/

Participation

• I am willing to submit a pull request for this issue.

[astrobot-houston]

• Reproduced: Yes
• Exploration: Yes — View branch
• Unit Test: Yes — packages/astro/test/core-image-svg.test.ts (new "SVGO prefixIds" describe block)
• Priority: P3: minor bug. This affects the experimental.svgOptimizer feature (which is explicitly experimental) and only manifests when using SVGO's prefixIds plugin with multiple SVGs that share element IDs on the same page. A workaround exists (manually configuring unique prefixes per file outside of Astro).

The SvgOptimizer interface defines optimize(contents: string) without a path parameter, so parseSvg() in utils.ts never forwards the file path it already has in scope. The built-in svgoOptimizer() in svgo.ts therefore calls SVGO's optimize() without the path option, causing path-dependent plugins like prefixIds to fall back to a generic prefix__ for every file. When multiple SVGs with the same element IDs are inlined on one page, the IDs collide.

I found a potential fix for this issue. The fix adds path as a second parameter to the SvgOptimizer.optimize signature, forwards it from parseSvg(), and spreads it into the SVGO config in svgoOptimizer(). This is a three-line change across types.ts, utils.ts, and svgo.ts. After the fix, SVGO produces per-file prefixes (e.g. one_svg__a, two_svg__a) as expected.

Try this fix

You can test this fix right now without waiting for a release:

npm i https://pkg.pr.new/astro@37a4692

If this fixes your issue, please leave a comment letting us know (e.g. "confirmed, this fixes it"). We'll then open a pull request to get this merged.

Full Triage Report

Reproduction

Created a minimal project with two SVG files (one.svg with a red gradient, two.svg with a blue gradient), both using id="myGrad". Configured experimental.svgOptimizer with cleanupIds and prefixIds plugins. After astro build, both SVGs had identical id="prefix__a" in the output HTML, confirming the ID collision.

Root Cause

The bug spans three files in packages/astro/src/assets/svg/:

1. types.ts — SvgOptimizer.optimize signature is (contents: string) => string | Promise<string> with no path parameter.
2. svgo.ts — svgoOptimizer() calls optimize(contents, config) without including path in the config.
3. utils.ts — parseSvg() has the file path (from meta.fsPath) and uses it for error messages, but never passes it to svgOptimizer.optimize().

SVGO's optimize() API accepts { path } in its config so plugins like prefixIds can derive unique per-file prefixes. Without it, every file gets the same generic prefix__ prefix.

Fix

Three one-line changes:

• types.ts: optimize: (contents: string, path: string) => string | Promise<string>
• svgo.ts: optimize: (contents, path) => optimize(contents, { ...config, path }).data
• utils.ts: processedContents = await svgOptimizer.optimize(contents, path)

Verification

• Built the package successfully with no type errors.
• All 15 existing SVG tests pass (core-image-svg.test.ts).
• All 5 SVG deduplication tests pass (svg-deduplication.test.ts).
• New test ("generates unique id prefixes per file") confirms the two gradients get distinct IDs (one_svg__a vs two_svg__a).
• End-to-end build of reproduction project produces correct unique prefixes.

Note: This is a breaking change to the SvgOptimizer public interface (adds a required path parameter to optimize). Since the feature is experimental, this should be acceptable, but custom SvgOptimizer implementations will need to add the path parameter to their optimize function signature.

This report was made by an LLM. The analysis may be wrong, and the potential fix might not work, but is intended as a starting point for exploring the issue.