fix: handle svg images without natural width and/or height on firefox #4
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
Emilio Cobos Álvarez
on https://bugzilla.mozilla.org/show_bug.cgi?id=1607081Drawbacks
max-width:150px
on the user agent stylesheet of Chrome.Problem - Missing height OR width
If an SVG is provided with ONLY height OR width, it's size will be
0 x Height
orWidth 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