nuxt
SVG Images taking black background
When using SVG images within the <nuxt-img> tag, an automatic black background is applied, even though SVG images typically do not have a background color. However, if the same image is used with the <img> tag, it renders correctly without any background color.
Here is GitHub link https://github.com/vinoddotcom/nuxt-svg-img-issue
run 1. num i
2. nmp run dev
I think we should probably consider disabling ipx transformation for .svg as I can't imagine a situation where this is more performant. Thoughts @pi0?
@danielroe The issue still exists, unable to move to the newer versions of nuxt-image because of this. Please help with this.
@danielroe @pi0 Is there any new information or development regarding this?
Issue Description:
I have encountered the same issue when using the nuxt-image module with SVG format images. The problem arises when we try to use nuxt-image for rendering svg images, The black background is visible in place of transparent area. Interestingly, this issue only occurs in stable versions of @nuxt/image module but does not persist in the edge channel version v1.0.0-27919678.2f5b64b.
Steps to Reproduce:
- Use the following syntax for nuxt-image with SVG format:
<nuxt-image format="svg" src="your-svg-image-path" />
- Observe the black background added to SVG images with transparent backgrounds.
Expected Behavior:
SVG images with transparent backgrounds should not have a black background added by default.
Additional Information:
-
The issue occurs on stable versions of @nuxt/image (i.e. v1.0.0 , v1.1.0).
-
The problem does not occur in the edge channel version v1.0.0-27919678.2f5b64b.
Possible Workaround:
If we remove the format prop to address the black background issue, SVG images are downloaded as JPEG instead of SVG.
Screenshots or Code Snippets:
Environment Information:
- Nuxt.js version: 3.8.2
- Nuxt Image module version: 1.1.0
- Browser: chrome@latest
- Operating System: ubuntu v22
