fix: handle svg images without natural width and/or height on firefox - #4
Open
gitChaoslord wants to merge 1 commit into
Open
fix: handle svg images without natural width and/or height on firefox#4gitChaoslord wants to merge 1 commit into
gitChaoslord wants to merge 1 commit into
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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: 0width: 0, resulting in blank images being generated.Solution
The SVG image will be appended to the DOM with a max-width of
150pxin order to measure its size and allowing the images to be generated correctly afterwards.I based this arbitrary max-width value on
Emilio Cobos Álvarezon https://bugzilla.mozilla.org/show_bug.cgi?id=1607081Drawbacks
max-width:150pxon 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 HeightorWidth 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