Skip to content

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

Open
gitChaoslord wants to merge 1 commit into
InBrowserApp:mainfrom
gitChaoslord:fix/no-naturalWidth-svg-firefox
Open

fix: handle svg images without natural width and/or height on firefox#4
gitChaoslord wants to merge 1 commit into
InBrowserApp:mainfrom
gitChaoslord:fix/no-naturalWidth-svg-firefox

Conversation

@gitChaoslord

Copy link
Copy Markdown

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