🐛 Bug Report: Techdocs SVG handling conflicts with light & dark mode

[jschwarze]

📜 Description

I'm using svg images inside my techdocs. I'd like to support the light & dark mode with help of mkdocs-material.
This leads to src attributes inside my techdocs like src="some-nice-image.svg#only-dark".

No problem so far until techdocs is changing the content-type for svg into text/plain' for security reason.
But the rewrite back to svg is failing because the src attribute doesn't end with svg 😢 .

👍 Expected behavior

It would be great, if the check will respect anchors in the url, inside of addBaseUrl.ts.

Current implementation:

const isSrcToSvg = attrName === 'src' && attrVal.endsWith('.svg');

Something like this would solve the problem:

const isSrcToSvg = attrName === "src" && attrVal.replace(/#.*/, "").endsWith(".svg");

👎 Actual Behavior with Screenshots

Currently, the svg images aren't shown in the browser because the content type is wrong.

👟 Reproduction steps

1. create a techdocs page
2. add an image of type svg
3. add an anchor tag '#only-light' to the image src.
4. open the techdocs via backstage.

📃 Provide the context for the Bug.

No response

🖥️ Your Environment

I don't believe this is needed for that issue.

👀 Have you spent some time to check if this bug has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

Are you willing to submit PR?

Yes I am willing to submit a PR!

[freben]

Or maybe even better -

new URL(attrVal, 'https://ignored.com').pathname.endsWith('.svg')

then it'll ignore fragments, query parts etc for you, so that e.g. my-image.svg?size=small works too.