Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SVG in img tag not rendering correctly in Firefox #1897

Open
jonmarkhall opened this issue Jun 19, 2019 · 2 comments · May be fixed by #3018
Open

SVG in img tag not rendering correctly in Firefox #1897

jonmarkhall opened this issue Jun 19, 2019 · 2 comments · May be fixed by #3018

Comments

@jonmarkhall
Copy link

Please make sure you are testing with the latest release of html2canvas.
Old versions are not supported and issues reported for them will be closed.

Please follow the general troubleshooting steps first:

  • [x ] You are using the latest version
  • [x ] You are testing using the non-minified version of html2canvas and checked any potential issues reported in the console

Bug reports:

I am trying to use html2canvas to generate an image from a page that contains an SVG in the form of a base-64 encoded data URI in an <img> tag. This has been working fine in Chrome but not in Firefox. I think this may be because Firefox is returning 0 for both img.naturalWidth and img.naturalHeight which as used as the intrinsicWidth and intrinsicHeight values in the ImageElementContainer class. The SVG has width and height attributes set. Could the intrinsicWidth and intrinsicHeight values be derived from the <svg>'s width and height instead of the <img>'s naturalWidth and naturalHeight?

I don't have an example I can easily provide but I can create a jsfiddle if needed.

Specifications:

  • html2canvas version tested with: 1.0.0-rc.3
  • Browser & version: Firefox 67.0.2
  • Operating system: Windows 10
@jonmarkhall
Copy link
Author

Just following up on this issue... any insight? Is there more information or samples that I could provide?

sponce pushed a commit to HSF/phoenix that referenced this issue Jan 12, 2023
Added width and height to lhcb logo
e3f3925 
This is a workaround to a bug in html2canvas where svg files with no width/height attributes are not rendered properly, at least under firefox.
See niklasvh/html2canvas#1897
This was referenced Jan 12, 2023
Merged
Open
@sponce
Copy link

sponce commented Jan 12, 2023

I've actually got the same problem recently and I've now tried to fix it in #3018. The fix still has a timing issue that I do not manage to fix for the moment. Do not hesitate to have a look.

sponce pushed a commit to HSF/phoenix that referenced this issue Jan 16, 2023
Added width and height to lhcb logo
abf7070 
This is a workaround to a bug in html2canvas where svg files with no width/height attributes are not rendered properly, at least under firefox.
See niklasvh/html2canvas#1897
sponce pushed a commit to HSF/phoenix that referenced this issue Jan 16, 2023
Added width and height to lhcb logo
6d504ab 
This is a workaround to a bug in html2canvas where svg files with no width/height attributes are not rendered properly, at least under firefox.
See niklasvh/html2canvas#1897
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

WIP fix svg with no width height sponce/html2canvas
2 participants
@sponce @jonmarkhall