SVG with Anchor Next/Image
Unanswered
Snowshoe posted this in #help-forum
SnowshoeOP
I have an svg image, generated by github stats.
At the end of its svg url, you can add an anchor to set the theme of the svg, since the svg includes css.
example: https://raw.githubusercontent.com/ThomasAunvik/github-stats/master/generated/overview.svg#gh-dark-mode-only
And this is the url next/image generated:
/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2FThomasAunvik%2Fgithub-stats%2Fmaster%2Fgenerated%2Foverview.svg%23gh-dark-mode-only&w=640&q=75
This makes it so the SVG doesn't have an anchor point. Add the anchor at the end of the next url image, and it would work, example
At the end of its svg url, you can add an anchor to set the theme of the svg, since the svg includes css.
example: https://raw.githubusercontent.com/ThomasAunvik/github-stats/master/generated/overview.svg#gh-dark-mode-only
And this is the url next/image generated:
/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2FThomasAunvik%2Fgithub-stats%2Fmaster%2Fgenerated%2Foverview.svg%23gh-dark-mode-only&w=640&q=75
This makes it so the SVG doesn't have an anchor point. Add the anchor at the end of the next url image, and it would work, example
<!-- This shows light mode -->
<Image
src="https://raw.githubusercontent.com/ThomasAunvik/github-stats/master/generated/languages.svg#gh-dark-mode-only"
width={300}
height={100}
alt="github-languages"
/>
<!-- This shows dark mode -->
<img src="/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2FThomasAunvik%2Fgithub-stats%2Fmaster%2Fgenerated%2Flanguages.svg&w=640&q=75#gh-dark-mode-only" />1 Reply
SnowshoeOP
Question is, how to add an anchor to next/image without using the hard coded img tag.