html-to-image icon indicating copy to clipboard operation
html-to-image copied to clipboard
verified publisher icon bubkoo

SVG Background Rendering Issue Introduced in v1.11.13

Open forestlet opened this issue 10 months ago • 4 comments

Expected Behavior

SVG images should render with correct backgrounds when converted to images using "html-to-image," maintaining consistency with the original HTML.

Current Behavior

After upgrading "html-to-image" from version 1.11.11 to 1.11.13, SVG image backgrounds are rendered incorrectly, leading to incorrect display of SVG backgrounds in the generated images.

Possible Solution

It's possible that changes in SVG background rendering code in version 1.11.13 are causing the background styles to be processed incorrectly. Review the code changes related to SVG rendering in version 1.11.13, especially the background style handling.

Steps To Reproduce

  1. open URL: https://vueflow.dev/examples/screenshot.html
  2. Use "html-to-image" version 1.11.11 to convert the HTML page to an image, verifying correct SVG background rendering.
  3. Upgrade "html-to-image" to version 1.11.13.
  4. Use "html-to-image" version 1.11.13 to convert the same HTML page to an image again, observing if SVG background rendering errors occur.
  5. Compare the two conversion results to confirm that version 1.11.13 introduces the background error.

Your Environment

  • html-to-image: 1.11.13 (problematic version), 1.11.11 (working version)

1.11.11 image Image

1.11.13 image Image

forestlet avatar Feb 25 '25 06:02 forestlet

👋 @forestlet

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

biiibooo[bot] avatar Feb 25 '25 06:02 biiibooo[bot]

Thanks for issue, I have the exact same problem. Installed v1.11.11 and it works fine for me too.

For me, v1.11.13 works while in vite development server. But after building and running on the output files, v1.11.13 doesn't work but v1.11.11 works.

cpakken avatar Mar 18 '25 06:03 cpakken

I believe the issue was introduced in v.1.11.12 with this: https://github.com/bubkoo/html-to-image/pull/462

hjalmers avatar Mar 27 '25 11:03 hjalmers

I've a similar problem with my node edges:

Before v.1.11.12: Image After v.1.11.12: Image

padawannn avatar Jul 25 '25 11:07 padawannn