search

nuxt / image

Plug-and-play image optimization for Nuxt applications.
https://image.nuxt.com
MIT License
1.33k stars 271 forks source link

SVG Images taking black background #869

Open vinoddotcom opened 1 year ago

vinoddotcom commented 1 year ago

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.

image | image

Here is GitHub link https://github.com/vinoddotcom/nuxt-svg-img-issue

run 1. num i

  1. nmp run dev
danielroe commented 1 year ago

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

cc: @pi0

Himanshu21git commented 1 year ago

@danielroe any update on this issue?

danielroe commented 1 year ago

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 commented 1 year ago

@danielroe any update on this issue?

Himanshu21git commented 1 year ago

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

matsn0w commented 11 months ago

+1

Himanshu21git commented 9 months ago

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

Abdullah-In-Sync commented 9 months ago

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:

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:

image

Environment Information: