SVG Images taking black background

[vinoddotcom]

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

[danielroe]

This is likely caused by ipx's transform of svgs.

cc: @pi0

[Himanshu21git]

@danielroe any update on this issue?

[danielroe]

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?

[vinoddotcom]

@danielroe any update on this issue?

[Himanshu21git]

@danielroe The issue still exists, unable to move to the newer versions of nuxt-image because of this. Please help with this.

[matsn0w]

+1

[Himanshu21git]

@danielroe @pi0 Is there any new information or development regarding this?

[Abdullah-In-Sync]

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:

1. Use the following syntax for nuxt-image with SVG format:

   <nuxt-image format="svg" src="your-svg-image-path" />

   Reproduce on Playground

2. 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

[bryandibben]

remove format="svg"

makes the svg transparent and removes the black background

Solution from Reddit https://www.reddit.com/r/Nuxt/comments/1amkmod/nuxt_3_nuxtimg_with_svg_is_setting_the_background/?rdt=60727