go-gitea / gitea

Git with a cup of tea! Painless self-hosted all-in-one software development service, including Git hosting, code review, team collaboration, package registry and CI/CD
https://gitea.com
MIT License
45.11k stars 5.49k forks source link

svgs without width or height are scaled to a size of zero in the image diff ui (imagediff.js) #28134

Open deliciouslytyped opened 12 months ago

deliciouslytyped commented 12 months ago

Description

Possible followup to https://github.com/go-gitea/gitea/pull/23310 . Diffing an svg where the width and height are removed but the viewBox is set results in an svg being shown with 0 width and height. (Not sure if any of these facts besides the size are relevant.)

image

Did not try to repro on demo site.

The basic issue is that imagediff.js uses naturalWidth and naturalHeight on an img tag pointing to the svg, which seems to return 0px for those values in this case.

https://github.com/go-gitea/gitea/blob/08552f0076204b99258f9135c77a962c302521dc/web_src/js/features/imagediff.js#L125-L134

(Note, the SVG fragment identifier may be useful in a fix https://stackoverflow.com/questions/48857681/how-to-modify-viewbox-of-an-svg-that-is-an-img-tag )

Gitea Version

1.20.5

Can you reproduce the bug on the Gitea demo site?

Yes

Log Gist

No response

Screenshots

No response

Git Version

No response

Operating System

No response

How are you running Gitea?

Self-built.

Database

None

zokkis commented 9 months ago

Can you give the svg or a minimal example? Because I tried with removing width and height and set viewBox but still looks right on version 1.22

image

image

The svgs are from ChatGPT