Page MenuHomePhabricator
Create Task
Maniphest T310433

Scale up SVG with a very small base size for better preview
Closed, ResolvedPublicFeature
Actions

Description

Feature summary (what you would like to be able to do and where):

Scale up SVG with a very small base size for better preview

Use case(s) (list the steps that you performed to discover that problem, and describe the actual underlying problem which you want to solve. Do not describe only a solution):

Example: Search for "lock icon"

A lot of very small files are shown because their SVG base size is very low, some are below 10x10 pixel. Therefore it could be hard - bases on screen solution - to see them

Benefits (why should this be implemented?):

To make the search result page better I suggest to scale up very small SVGs to at least 100x100 pixel

grafik.png (1×1 px, 340 KB)

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
Scale up SVGs in MediaSearch if possiblemediawiki/extensions/MediaSearchmaster+21 -5
API: imageinfo should take into account vector scalingmediawiki/coremaster+3 -3
Customize query in gerrit

Event Timeline

Raymond created this task.Jun 12 2022, 9:14 AM
Restricted Application added a project: Structured-Data-Backlog. · View Herald TranscriptJun 12 2022, 9:14 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
CBogen moved this task from Triage to Multimedia on the Structured-Data-Backlog board.Jun 27 2022, 4:36 PM
AUgolnikova-WMF moved this task from Multimedia to MediaSearch on the Structured-Data-Backlog board.Jul 1 2024, 1:55 PM
matthiasmullie subscribed.Aug 19 2024, 7:37 PM

Looks like the &prop=imageinfo API result always returns the size of the media if it is smaller than the requested &iiurlheight=, probably preferring smaller images over lossy upscaling.
SVGs should upscale just fine, though, and would IMO indeed merit special-casing.

MarkTraceur edited projects, added Structured-Data-Backlog (Current Work); removed Structured-Data-Backlog.Aug 21 2024, 1:47 PM
MarkTraceur moved this task from Incoming to Ready for Estimation on the Structured-Data-Backlog (Current Work) board.Aug 21 2024, 1:47 PM
AUgolnikova-WMF edited projects, added Structured-Data-Backlog; removed Structured-Data-Backlog (Current Work).Sep 2 2024, 2:43 PM
AUgolnikova-WMF moved this task from MediaSearch to Triage on the Structured-Data-Backlog board.Sep 2 2024, 2:50 PM
TheDJ subscribed.Oct 15 2025, 9:07 PM

Looks like the &prop=imageinfo API result always returns the size of the media if it is smaller than the requested

I don't think so... it seems the request explicitly has asked for a thumbnail for 20px. (snippet taken from the html document of the linked search above)

"26": {
                    "title": "File:OOjs UI icon lock-ltr-yellow.svg",
...
                    "fullurl": "https://commons.wikimedia.org/wiki/File:OOjs_UI_icon_lock-ltr-yellow.svg",
                    "imageinfo": [{
                        "size": 407,
                        "width": 20,
                        "height": 20,
                        "thumburl": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/OOjs_UI_icon_lock-ltr-yellow.svg/20px-OOjs_UI_icon_lock-ltr-yellow.svg.png",
                        "thumbwidth": 20,
                        "thumbheight": 20,
                        "responsiveUrls": {
                            "1.5": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/OOjs_UI_icon_lock-ltr-yellow.svg/30px-OOjs_UI_icon_lock-ltr-yellow.svg.png",
                            "2": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/OOjs_UI_icon_lock-ltr-yellow.svg/40px-OOjs_UI_icon_lock-ltr-yellow.svg.png"
                        },
                        "url": "https://upload.wikimedia.org/wikipedia/commons/8/85/OOjs_UI_icon_lock-ltr-yellow.svg",
                        "descriptionurl": "https://commons.wikimedia.org/wiki/File:OOjs_UI_icon_lock-ltr-yellow.svg",
                        "descriptionshorturl": "https://commons.wikimedia.org/w/index.php?curid=95410820",
                        "mime": "image/svg+xml"
                    }],
                    "wrapperStyle": "width: 80px;",
                    "extension": "image/svg+xml",
                    "imageStyle": "height: 100% !important; max-width: 20px !important; max-height: 20px;"
                },

This indicates a 20px thumbnail was explicitly requested. It's the extension that has determined it needed a 20px image size for this svg.
If you however request something larger you do get something larger: https://commons.wikimedia.org/w/api.php?action=query&format=json&prop=imageinfo&titles=File%3AOOjs%20UI%20icon%20lock-ltr-yellow.svg&formatversion=2&iiprop=url%7Cmime%7Cdimensions&iiurlwidth=250

{
    "batchcomplete": true,
    "query": {
        "pages": [
            {
                "pageid": 95410820,
                "ns": 6,
                "title": "File:OOjs UI icon lock-ltr-yellow.svg",
                "imagerepository": "local",
                "imageinfo": [
                    {
                        "size": 407,
                        "width": 20,
                        "height": 20,
                        "thumburl": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/OOjs_UI_icon_lock-ltr-yellow.svg/250px-OOjs_UI_icon_lock-ltr-yellow.svg.png",
                        "thumbwidth": 250,
                        "thumbheight": 250,
                        "responsiveUrls": {
                            "1.5": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/OOjs_UI_icon_lock-ltr-yellow.svg/375px-OOjs_UI_icon_lock-ltr-yellow.svg.png",
                            "2": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/OOjs_UI_icon_lock-ltr-yellow.svg/500px-OOjs_UI_icon_lock-ltr-yellow.svg.png"
                        },
                        "url": "https://upload.wikimedia.org/wikipedia/commons/8/85/OOjs_UI_icon_lock-ltr-yellow.svg",
                        "descriptionurl": "https://commons.wikimedia.org/wiki/File:OOjs_UI_icon_lock-ltr-yellow.svg",
                        "descriptionshorturl": "https://commons.wikimedia.org/w/index.php?curid=95410820",
                        "mime": "image/svg+xml"
                    }
                ]
            }
        ]
    }
}
TheDJ added a comment.EditedOct 15 2025, 9:32 PM

ah wait a second.. it makes a request for a thumbheight, and it seems that if you request a thumbheight, it does limit to inherent file width, whereas when requesting a width, it returns whatever you request.

https://commons.wikimedia.org/w/api.php?action=query&format=json&prop=imageinfo&titles=File%3AOOjs%20UI%20icon%20lock-ltr-yellow.svg&formatversion=2&iiprop=url%7Cmime%7Cdimensions&iiurlheight=180

{
    "batchcomplete": true,
    "query": {
        "pages": [
            {
                "pageid": 95410820,
                "ns": 6,
                "title": "File:OOjs UI icon lock-ltr-yellow.svg",
                "imagerepository": "local",
                "imageinfo": [
                    {
                        "size": 407,
                        "width": 20,
                        "height": 20,
                        "thumburl": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/OOjs_UI_icon_lock-ltr-yellow.svg/20px-OOjs_UI_icon_lock-ltr-yellow.svg.png",
                        "thumbwidth": 20,
                        "thumbheight": 20,
                        "responsiveUrls": {
                            "1.5": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/OOjs_UI_icon_lock-ltr-yellow.svg/30px-OOjs_UI_icon_lock-ltr-yellow.svg.png",
                            "2": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/OOjs_UI_icon_lock-ltr-yellow.svg/40px-OOjs_UI_icon_lock-ltr-yellow.svg.png"
                        },
                        "url": "https://upload.wikimedia.org/wikipedia/commons/8/85/OOjs_UI_icon_lock-ltr-yellow.svg",
                        "descriptionurl": "https://commons.wikimedia.org/wiki/File:OOjs_UI_icon_lock-ltr-yellow.svg",
                        "descriptionshorturl": "https://commons.wikimedia.org/w/index.php?curid=95410820",
                        "mime": "image/svg+xml"
                    }
                ]
            }
        ]
    }
}

This is a detail inside ApiQueryImageInfo class:

if ( !isset( $thumbParams['width'] ) && isset( $thumbParams['height'] ) ) {
        // We want to limit only by height in this situation, so pass the
        // image's full width as the limiting width. But some file types
        // don't have a width of their own, so pick something arbitrary so
        // thumbnailing the default icon works.
        if ( $image->getWidth() <= 0 ) {
                $thumbParams['width'] =
                        max( $this->getConfig()->get( MainConfigNames::ThumbLimits ) );
        } else {
                // Here we assume that things that have a size, cannot be larger than the inherent width of that item, even if it is scalable.
                $thumbParams['width'] = $image->getWidth();
        }
}
gerritbot added a comment.Oct 15 2025, 9:41 PM

Change #1196528 had a related patch set uploaded (by TheDJ; author: TheDJ):

[mediawiki/core@master] API: imageinfo should take into account vector scaling

https://gerrit.wikimedia.org/r/1196528

gerritbot added a project: Patch-For-Review.Oct 15 2025, 9:41 PM
TheDJ claimed this task.Oct 21 2025, 12:44 PM
gerritbot added a comment.Oct 21 2025, 12:49 PM

Change #1196528 merged by jenkins-bot:

[mediawiki/core@master] API: imageinfo should take into account vector scaling

https://gerrit.wikimedia.org/r/1196528

ReleaseTaggerBot added a project: MW-1.45-notes (1.45.0-wmf.25; 2025-10-28).Oct 21 2025, 1:00 PM
Maintenance_bot removed a project: Patch-For-Review.Oct 21 2025, 1:31 PM
TheDJ added a comment.EditedOct 21 2025, 2:32 PM

on a related note. the html for the img results contain inline css overriding the size of the element inside the <a> link.. I've been trying to figure out why this is here, it seems superfluous as the stylesheet for the element already seems to handle most of this.

[edit] they are there because of minerva (facilitating it's lazy loading)

TheDJ added a comment.Nov 3 2025, 10:20 AM

hmm. this doesn't seem fixed yet...

gerritbot added a comment.Nov 8 2025, 4:50 PM

Change #1203211 had a related patch set uploaded (by TheDJ; author: TheDJ):

[mediawiki/extensions/MediaSearch@master] Scale up SVGs in MediaSearch if possible

https://gerrit.wikimedia.org/r/1203211

gerritbot added a project: Patch-For-Review.Nov 8 2025, 4:50 PM
TheDJ added a comment.EditedNov 8 2025, 4:53 PM

There's quite some trickery going on here with overriding sizing for minerva, to make the dimensions of the images limited by max-width of the parent viewport. However in this solution, we mainly want to be height limited, which flips those assumptions around.. As the previous developer leaving their comments in the code, I'm not entirely happy with the solution... but there are many different factors at play and this seems the safest solution for now.

gerritbot added a comment.Nov 13 2025, 6:21 PM

Change #1203211 merged by jenkins-bot:

[mediawiki/extensions/MediaSearch@master] Scale up SVGs in MediaSearch if possible

https://gerrit.wikimedia.org/r/1203211

Maintenance_bot removed a project: Patch-For-Review.Nov 13 2025, 6:30 PM
ReleaseTaggerBot added a project: MW-1.46-notes (1.46.0-wmf.3; 2025-11-19).Nov 13 2025, 7:00 PM
TheDJ closed this task as Resolved.Tue, Nov 18, 8:24 PM

Validated on test.wp.org
https://test.wikipedia.org/wiki/Special:MediaSearch?type=image&search=Lock+icon

Screenshot 2025-11-18 at 21.22.54.png (1×2 px, 806 KB)

Should be fixed everywhere after the train completes.

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits