Incorrect svg size in diff viewer

[POPSuL]

Description

Horizontal svgs displays as vertical with large transparent background due incorrect calculating size from viewbox.

Sample svg:

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 248 40">
  <defs>
    <style>
      .st0 {
        fill: none;
      }

      .st1, .st2 {
        fill: #910000;
      }

      .st1, .st3 {
        fill-rule: evenodd;
      }

      .st4 {
        clip-path: url(#clippath-1);
      }

      .st5 {
        fill: #fff;
      }

      .st3, .st6 {
        fill: #c20;
      }

      .st7 {
        clip-path: url(#clippath);
      }
    </style>
    <clipPath id="clippath">
      <rect class="st0" width="247.7" height="40"/>
    </clipPath>
    <clipPath id="clippath-1">
      <rect class="st0" width="40" height="40"/>
    </clipPath>
  </defs>
  <g class="st7">
    <g id="edasakhalin-1a">
      <g class="st4">
        <g>
          <path id="Vector" class="st3" d="M11.8,0h16.5c6.5,0,11.8,5.3,11.8,11.8v16.5c0,6.5-5.3,11.8-11.8,11.8H11.8c-6.5,0-11.8-5.3-11.8-11.8V11.8C0,5.3,5.3,0,11.8,0Z"/>
          <path id="Vector_2" class="st5" d="M30.5,24.5c2.4,0,4.3,1.8,4.5,4.2v.2c0,1.7-.4,3.3-1.2,4.7-1.5.8-3.2,1.2-5,1.3.6-.4,1.2-1,1.6-1.6l.2-.3c.9-1.2,1.3-2.7,1.3-4.2h0c0-.9-.7-1.5-1.5-1.5H9.5c-.8,0-1.5.7-1.5,1.5v.4c0,1.5.6,2.9,1.5,4.1l.2.2c.4.5.9,1,1.5,1.4-1.8,0-3.5-.5-5-1.3-.7-1.3-1.1-2.8-1.1-4.3v-.4c0-2.5,2-4.5,4.5-4.5h21ZM24.6,8.3c.6.5.7,1.5.2,2.1l-7.5,8.9c-.5.6-1.5.7-2.1.2-.6-.5-.7-1.5-.2-2.1l7.5-8.9c.5-.6,1.5-.7,2.1-.2ZM33.2,11.5c.5.6.4,1.6-.2,2.1l-7.5,5.9c-.6.5-1.6.4-2.1-.2-.5-.6-.4-1.6.2-2.1l7.5-5.9c.6-.5,1.6-.4,2.1.2Z"/>
        </g>
      </g>
      <g>
        <g id="Union">
          <path class="st3" d="M85.3,10c.2,0,.4,0,.5.2.1.1.2.3.2.5v14.9h1.3c.2,0,.4,0,.5.2s.2.3.2.5v6.5c0,.2,0,.3-.2.5-.1.1-.3.2-.5.2h-3.1c-.2,0-.4,0-.5-.2-.1-.1-.2-.3-.2-.5v-3.2h-10.8v3.2c0,.2,0,.3-.2.5-.1.1-.3.2-.5.2h-3.1c-.2,0-.3,0-.5-.2s-.2-.3-.2-.5v-6.5c0-.2,0-.4.2-.5.1-.1.3-.2.5-.2h.5c.4,0,.8-.2,1.1-.6.3-.4.6-1,.8-1.8.2-.8.3-1.8.4-2.9,0-1.1.1-2.4.1-3.8v-5.8c0-.2,0-.4.2-.5.1-.1.3-.2.5-.2h12.6ZM76.3,17c0,2.1-.1,3.9-.4,5.3-.2,1.4-.6,2.5-1.1,3.3h6.6v-11.6h-5.2v3.1Z"/>
          <path class="st6" d="M65.4,10c.2,0,.4,0,.5.2.1.1.2.3.2.5v2.2c0,.2,0,.3-.2.5s-.3.2-.5.2h-9.1v4.4h8.5c.2,0,.4,0,.5.2.1.1.2.3.2.5v2.1c0,.2,0,.3-.2.5-.1.1-.3.2-.5.2h-8.5v4.5h9.3c.2,0,.4,0,.5.2.1.1.2.3.2.5v2.2c0,.2,0,.4-.2.5-.1.1-.3.2-.5.2h-12.9c-.2,0-.4,0-.5-.2-.1-.1-.2-.3-.2-.5V10.7c0-.2,0-.4.2-.5.1-.1.3-.2.5-.2h12.7Z"/>
          <path class="st3" d="M100.6,10c.3,0,.5,0,.7.2.2.1.3.3.3.5l6.7,18c0,0,0,.2,0,.3,0,.1,0,.3-.2.4-.1.1-.3.2-.4.2h-2.9c-.3,0-.5,0-.6-.2-.1-.1-.2-.3-.3-.4l-1.2-3.1h-7.9l-1.2,3.1c0,.1-.1.2-.3.4s-.3.2-.6.2h-2.9c-.2,0-.3,0-.4-.2-.1-.1-.2-.3-.2-.4s0-.2,0-.3l6.7-18c0-.2.2-.4.3-.5.2-.1.4-.2.7-.2h3.6ZM95.9,22.3h5.8l-2.9-8.1-2.9,8.1Z"/>
        </g>
        <g id="Union_2">
          <path class="st2" d="M118.8,10c1.3,0,2.4.2,3.4.5s1.9.8,2.7,1.4c.7.6,1.3,1.3,1.7,2.1.4.8.6,1.7.7,2.7,0,.2,0,.3-.2.4-.1.1-.3.2-.4.2h-3.2c-.2,0-.4,0-.5-.2-.1-.1-.2-.3-.3-.6-.3-1.1-.7-1.9-1.4-2.3-.7-.4-1.5-.6-2.4-.6s-2.1.3-2.7,1c-.7.6-1,1.7-1.1,3.2,0,1.5,0,3.1,0,4.7,0,1.5.4,2.5,1.1,3.2.7.6,1.6,1,2.7,1,1,0,1.8-.2,2.4-.6.7-.4,1.1-1.2,1.4-2.3,0-.3.2-.5.3-.6.1-.1.3-.2.5-.2h3.2c.2,0,.3,0,.4.2.1.1.2.3.2.4,0,1-.3,1.9-.7,2.7-.4.8-1,1.5-1.7,2.1-.7.6-1.6,1.1-2.7,1.4-1,.3-2.2.5-3.4.5-1.8,0-3.2-.3-4.5-.9-1.2-.6-2.2-1.5-2.8-2.6-.7-1.1-1-2.5-1.1-4.1,0-.8,0-1.6,0-2.5s0-1.7,0-2.5c0-1.6.4-3,1.1-4.1.7-1.1,1.7-2,2.9-2.6,1.2-.6,2.7-.9,4.4-.9Z"/>
          <path class="st1" d="M140,10.3c.3,0,.5,0,.7.2.2.1.3.3.3.5l6.7,18c0,0,0,.2,0,.3,0,.1,0,.3-.2.4-.1.1-.3.2-.4.2h-2.9c-.3,0-.5,0-.6-.2-.1-.1-.2-.3-.3-.4l-1.2-3.1h-7.9l-1.2,3.1c0,.1-.1.2-.3.4-.1.1-.3.2-.6.2h-2.9c-.2,0-.3,0-.4-.2-.1-.1-.2-.3-.2-.4s0-.2,0-.3l6.7-18c0-.2.2-.4.3-.5.2-.1.4-.2.7-.2h3.6ZM135.3,22.6h5.8l-2.9-8.1-2.9,8.1Z"/>
          <path class="st2" d="M152.9,10.3c.2,0,.4,0,.6.2.1.1.3.3.3.4l3.8,5.6,3.8-5.6c0-.1.2-.2.3-.4.1-.1.3-.2.6-.2h3.3c.1,0,.3,0,.4.2.1.1.2.2.2.4s0,.2-.1.3l-5.8,8.7,6.2,9.1c0,0,0,.1,0,.2,0,0,0,.1,0,.2,0,.1,0,.3-.2.4-.1.1-.3.2-.4.2h-3.6c-.2,0-.4,0-.6-.2-.1-.1-.2-.2-.3-.3l-4.1-5.9-4.1,5.9c0,0-.2.2-.3.3-.1.1-.3.2-.6.2h-3.4c-.2,0-.3,0-.4-.2-.1-.1-.2-.3-.2-.4s0-.1,0-.2c0,0,0-.1,0-.2l6.2-9.1-5.8-8.7c0-.1,0-.2,0-.3s0-.3.2-.4c.1-.1.3-.2.4-.2h3.4Z"/>
          <path class="st1" d="M178.6,10.3c.3,0,.5,0,.7.2.2.1.3.3.3.5l6.7,18c0,0,0,.2,0,.3,0,.1,0,.3-.2.4-.1.1-.3.2-.4.2h-2.9c-.3,0-.5,0-.6-.2-.1-.1-.2-.3-.3-.4l-1.2-3.1h-7.9l-1.2,3.1c0,.1-.1.2-.3.4-.1.1-.3.2-.6.2h-2.9c-.2,0-.3,0-.4-.2-.1-.1-.2-.3-.2-.4s0-.2,0-.3l6.7-18c0-.2.2-.4.3-.5.2-.1.4-.2.7-.2h3.6ZM173.9,22.6h5.8l-2.9-8.1-2.9,8.1Z"/>
          <path class="st2" d="M204.8,10.3c.2,0,.4,0,.5.2.1.1.2.3.2.5v18.2c0,.2,0,.4-.2.5-.1.1-.3.2-.5.2h-3.1c-.2,0-.4,0-.5-.2-.1-.1-.2-.3-.2-.5v-14.9h-5.6v3.1c0,2.3-.1,4.2-.3,5.8-.2,1.6-.6,2.8-1.1,3.8-.5,1-1.3,1.7-2.2,2.2-.9.5-2.1.7-3.6.8-.2,0-.4,0-.5-.2-.1-.1-.2-.3-.2-.5v-2.5c0-.4.2-.6.6-.7.5,0,1-.4,1.4-.8.4-.4.7-1,1-1.8.3-.8.4-1.7.6-2.8.1-1.1.2-2.4.2-3.8v-5.8c0-.2,0-.4.2-.5.1-.1.3-.2.5-.2h13Z"/>
          <path class="st2" d="M213.4,10.3c.2,0,.4,0,.5.2.1.1.2.3.2.5v12.1l8.6-12.3c0-.1.2-.2.3-.3.2-.1.3-.2.6-.2h2.7c.2,0,.4,0,.5.2.1.1.2.3.2.5v18.2c0,.2,0,.4-.2.5-.1.1-.3.2-.5.2h-3.1c-.2,0-.4,0-.5-.2-.1-.1-.2-.3-.2-.5v-11.7l-8.6,11.9c0,.1-.1.2-.3.3-.1.1-.3.2-.6.2h-2.8c-.2,0-.4,0-.5-.2-.1-.1-.2-.3-.2-.5V11c0-.2,0-.4.2-.5.1-.1.3-.2.5-.2h3.1Z"/>
          <path class="st2" d="M234.9,10.3c.2,0,.4,0,.5.2.1.1.2.3.2.5v7h7.6v-7c0-.2,0-.4.2-.5.1-.1.3-.2.5-.2h3.1c.2,0,.4,0,.5.2s.2.3.2.5v18.2c0,.2,0,.4-.2.5-.1.1-.3.2-.5.2h-3.1c-.2,0-.4,0-.5-.2-.1-.1-.2-.3-.2-.5v-7.2h-7.6v7.2c0,.2,0,.4-.2.5-.1.1-.3.2-.5.2h-3.1c-.2,0-.4,0-.5-.2-.1-.1-.2-.3-.2-.5V11c0-.2,0-.4.2-.5.1-.1.3-.2.5-.2h3.1Z"/>
        </g>
      </g>
    </g>
  </g>
</svg>

Probably solution:

diff --git a/web_src/js/features/imagediff.ts b/web_src/js/features/imagediff.ts
index 23f05fbdc7..a043ddd11f 100644
--- a/web_src/js/features/imagediff.ts
+++ b/web_src/js/features/imagediff.ts
@@ -52,8 +52,8 @@ function getDefaultSvgBoundsIfUndefined(text: string, src: string): Bounds | nul
     if (svg.hasAttribute('viewBox')) {
       const viewBox = svg.viewBox.baseVal;
       return {
-        width: defaultSize,
-        height: defaultSize * viewBox.width / viewBox.height,
+        width: viewBox.width,
+        height: viewBox.height,
       };
     }
     return {

Gitea Version

1.26.0+dev-448-g5e9b9b33d1

Can you reproduce the bug on the Gitea demo site?

No

Log Gist

No response

Screenshots

Git Version

No response

Operating System

No response

How are you running Gitea?

Binary from github

Database

MySQL/MariaDB

[wxiaoguang]

Suppose: defaultSize = 80, viewBox.width = 1000 , viewBox.height = 500
Expect: width = 80, height = 40
So: height: defaultSize * viewBox.height / viewBox.width

[dasjideepak]

Hi @POPSuL @wxiaoguang

I think this issue is already resolved in current code,

I did a full local setup to confirm:

Setup: Built Gitea from source with SQLite (TAGS="bindata sqlite sqlite_unlock_notify" make build), ran ./gitea web, and used make watch-frontend for the frontend. Completed first-run setup and created a test repo with a horizontal SVG

Testing: Added the SVG, then changed it and committed. Opened the commit and checked the image diff viewer (Side by side, Swipe, Overlay). The SVG keeps the correct aspect ratio and no longer appears as a vertical strip with a large transparent area.
Environment: Running locally on macOS from the current main branch (no Docker). Frontend built with make watch-frontend.

[POPSuL]

@dasjideepak its strange. I rebuild gitea from HEAD (2176e84) and that svg stretch to incorrect height:

(page zoomed out, there is the same empty space at the top like as bottom)

[POPSuL]

Also I can reproduce it on demo:
https://demo.gitea.com/POPSuL/test/commit/1a28298f541d58be2b0fb632869a3fcbe8561e1e
https://demo.gitea.com/POPSuL/test/commit/07db3303ccf4d734104b40c19f5dbf67d9d45514

[wxiaoguang]

Suppose: defaultSize = 80, viewBox.width = 1000 , viewBox.height = 500 Expect: width = 80, height = 40 So: height: defaultSize * viewBox.height / viewBox.width

Can you try this ? swap the viewBox.height and viewBox.width

[POPSuL]

Can you try this ? swap the viewBox.height and viewBox.width

I swapped the width and height, rebuild it, and everything seems to look normal.

[wxiaoguang]

Can you try this ? swap the viewBox.height and viewBox.width

I swapped the width and height, rebuild it, and everything seems to look normal.

Would you like to open a PR? 🙏

[POPSuL]

Can you try this ? swap the viewBox.height and viewBox.width

I swapped the width and height, rebuild it, and everything seems to look normal.

Would you like to open a PR? 🙏

Done :)