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.

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

fix: handle svg images without natural width and/or height on firefox #4

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

gitChaoslord
Copy link

I've attempted to correct issue #3 and to mimick the handling of SVGs with a missing height or width attributes as it happens on Chrome, with mixed results.

Problem - Missing height AND width

If an SVG is provided on Firefox with no height and no width assigned, it's size will be height: 0 width: 0, resulting in blank images being generated.

Solution

The SVG image will be appended to the DOM with a max-width of 150px in order to measure its size and allowing the images to be generated correctly afterwards.

I based this arbitrary max-width value on

  • A comment by Emilio Cobos Álvarez on https://bugzilla.mozilla.org/show_bug.cgi?id=1607081
  • The behavior of your service on Chrome, when uploading an SVG icon without height and width attributes. e.g. Adding the demo icon results in an 150x150 SVG, same holds true for other SVGs I've used without height/width attributes.

Drawbacks

  • I was unable to find more details to support this img element rule max-width:150px on the user agent stylesheet of Chrome.
  • There are some discrepancies here and there for bigger SVGs, for example this grid SVG has a size of 143x150 on chrome while on Firefox my current solution translates it to 150x157

Problem - Missing height OR width

If an SVG is provided with ONLY height OR width, it's size will be 0 x Height or Width x 0, resulting again in blank images being generated.

Solution

The SVG image will be appended to the DOM with, in the case of missing height, the height attribute will be equal to the images natural width and vice versa for missing width. - (Natural implies the value assigned on the SVG element)

I based this on the behavior of your service when uploading an SVG icon without height OR width attributes on Chrome.


Here are the SVGs I used during the process so far
angular 0x128
angular 128x0
angular 128x128
angular
favicon 48x48
favicon 100x100 %
favicon
grid
test-svgrepo


I do not expect this pull request to be merged at this point and of course, if no contributions are to be accepted or Firefox browser is something you do not wish to support, I understand. In that case feel free to close this request.

I am open to any criticism or insight and thanks again for this tool

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant