Page MenuHomePhabricator

Wikimedia and MediaWiki footer buttons should be SVG or HiDPI
Closed, ResolvedPublic

Description

The branding buttons at the footer of every page should be in SVG or at least use a higher-resolution image for HiDPI screens.

SVG versions of the "a Wikimedia project" and "Powered by MediaWiki" buttons are already available at Commons:

[[File:A Wikimedia project.svg]] (copyright by Wikimedia)
[[File:Powered by MediaWiki.svg]] (PD; text might be too light)


Version: 1.23.0
Severity: enhancement

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 22 2014, 3:19 AM
bzimport set Reference to bz63872.
bzimport added a subscriber: Unknown Object (MLST).
mxn created this task.Apr 13 2014, 6:49 AM

Adding "easy" keyword as this shouldn't be hard for folks who know how to use SVG editing tools.

  • Bug 65715 has been marked as a duplicate of this bug. ***
mxn added a comment.May 25 2014, 7:40 AM

It’s also easy because the SVG images are already available. We’ve been using a double-size PNG copy of it at [[m:www.wikipedia.org template]] and the other portals since November or so.

Change 142860 had a related patch set uploaded by M4tx:
Replace Powered by Mediawiki PNG image with SVG version

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

m4tx added a comment.Jun 29 2014, 9:27 AM

I already uploaded a patch that replaces "Powered by Mediawiki" PNG image with SVG one. But there's a question: currently, "A Wikimedia project" image is located on bits.wikimedia.org server, so I can not upload the SVG version there (can I?). Should we use the SVG from Commons then (https://upload.wikimedia.org/wikipedia/commons/7/7b/A_Wikimedia_project.svg) or is there a way to put it on bits.wikimedia.org?

(In reply to Minh Nguyễn from comment #3)

It’s also easy because the SVG images are already available. We’ve been
using a double-size PNG copy of it at [[m:www.wikipedia.org template]] and
the other portals since November or so.

PNG has different issues though. Mxn, do you have suggestions on how to handle fallbacks for browser without native SVG rendering?

mxn added a comment.Jul 16 2014, 10:59 AM

(In reply to Nemo from comment #6)

PNG has different issues though. Mxn, do you have suggestions on how to
handle fallbacks for browser without native SVG rendering?

The wiki*.org portals all embed 1x, 1.5x, and 2x PNGs via the srcset attribute, which requires JavaScript (such as the jquery.hidpi module, available in core) to work in some browsers, like Firefox before 32.

To use SVG directly, we'd have to use CSS image replacement to allow for a PNG fallback. The site logo uses a form of CSS image replacement, so I suppose there's precedent for that.

This is blocked on MediaWiki having a logo that doesn't embed a low-res JPEG in it. These SVG drawings are cool and all but they're all arbitrary. We shouldn't start shipping the in the software until we have a new logo that is scalable, and then replace the PNG logo on mediawiki.org with a rendering of that SVG, and we can build Powered-by badges from it in SVG/PNG as well.

The solution to the fallback issue is solved by using CSS.

Qgil added a comment.Sep 3 2014, 3:59 PM

We are accumulating reasons to update the official MediaWiki logo. For the cheap price of 2,9M you can get a svg version of the current logo:

https://commons.wikimedia.org/wiki/File:MediaWiki_logo_1.svg

There is also a simplified version that we have been using in stickers and such:

https://commons.wikimedia.org/wiki/File:Mediawiki_logo_reworked_2.svg (38 Kb, which still sounds like too much)

demon added a comment.Sep 3 2014, 4:08 PM

We should have a logo contest then like we usually do when it's logo-changing time :)

hwalls wrote:

Chad, that is not funny. :)

Change 166416 had a related patch set uploaded by Brion VIBBER:
Add HiDPI PNG variants for 'Powered by MediaWiki' footer icon

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

Change 166417 had a related patch set uploaded by Brion VIBBER:
Add HiDPI PNG variants for 'A Wikimedia Project' logo

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

Change 166417 merged by jenkins-bot:
Add HiDPI PNG variants for 'A Wikimedia Project' logo

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

Do we want to keep this open to account for the desire to move to SVG-only interface components, or close it as fixed?

brion added a comment.Oct 14 2014, 6:59 PM

I'd say close it as fixed once both icons are merged; SVG is nice but if it's this painful to make one let's not worry too much about it!

brion added a subscriber: brion.Jan 23 2015, 7:55 PM

Change 166416 had a related patch set uploaded (by Jforrester):
Add HiDPI PNG variants for 'Powered by MediaWiki' footer icon

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

Patch-For-Review

Change 166416 merged by jenkins-bot:
Add HiDPI PNG variants for 'Powered by MediaWiki' footer icon

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

Jdforrester-WMF closed this task as Resolved.Jan 23 2015, 9:46 PM
Jdforrester-WMF assigned this task to brion.
Jdforrester-WMF set Security to None.

But now we need a separate task for SVG logos as a blocker of T42465...

Paladox added a subscriber: Paladox.Feb 9 2015, 8:19 PM

Hi I have reduced the size of the svg version by 200 kb now stands at 303 kb. It might be able to be optimised more but I am not sure how optimised so that it goes down to 100 kb or less without causing the quality of the image to go.

Qgil removed a subscriber: Qgil.Feb 9 2015, 8:21 PM

@Paladox can you attached the optimized asset to this task please?

Here is the optimise version.

demon removed a subscriber: demon.Feb 10 2015, 2:50 PM
matmarex removed a subscriber: matmarex.Feb 10 2015, 3:51 PM