Page MenuHomePhabricator

Switch existing wikis from high density logos to SVG
Open, LowPublic

Description

Now that mediawiki supports svg with png fallback for logo's[1], we should use svg over high density logo's.

  1. https://gerrit.wikimedia.org/r/#/c/193434/

to switch, it's as easy as doing

$wgLogo = 'png_image', (optional)

$wgLogoHD = [
 'svg' => 'svg_image',
];

or for mw-configuation

'wgLogo' => [
	'enwiki' => '.png',
];

'wgLogoHD' => [
	'enwiki' => [ 'svg' => '.svg' ],
];

before deleting the 1.5 and 2.x images wait a couple of days.

Event Timeline

Urbanecm subscribed.

IMHO Wikimedia-Site-requests is more relevant than MediaWiki-Configuration. Feel free to revert if you disagree @Paladox or everyone else.

I'm interested in this task, putting it onto my radar.

Reedy subscribed.

I would suggest waiting a couple of weeks (possibly even a month) before deleting anything

tomasz renamed this task from Switch existing wiki's from high density logo's to svg to Switch existing wikis from high density logos to SVG.Dec 4 2017, 3:37 PM

I'm going to convert all the wikis without deleting HD logos.

Change 399805 had a related patch set uploaded (by Urbanecm; owner: Urbanecm):
[operations/mediawiki-config@master] Switch from $wgLogoHD to direct using of a SVG

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

I've just uploaded a patch that uploads bunch of SVGs from Commons (named File:Wikipedia-logo-v2-LANGCODE.svg). I didn't checked they match the PNGs.

I've also changed the IS.php file to match the new syntax.

This commit is for Wikipedias only.

Also, some projects may disappeard from the $wgLogo section, I've based the section on wikipedia.dblist (manually deleted arbcom wikis from that dblist).

Also, I didn't updated $wgLogoHD, will amend that commit later.

Reviews are welcomed.

Martin Urbanec

Ad my above comment: I've removed all Wikipedia entries from $wgLogoHD in the commit linked above.

This should be announced in tech news.

For managers of User-notice: All Wikipedias should start to use SVGs as HD logos on January 2nd. Other families will come later (nobody knows when yet).

Change 399805 merged by jenkins-bot:
[operations/mediawiki-config@master] Switch Wikipedias from $wgLogoHD to direct using of a SVG

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

Mentioned in SAL (#wikimedia-operations) [2018-01-02T14:32:36Z] <zfilipin@tin> Synchronized static/images/project-logos/: SWAT: [[gerrit:399805|Switch Wikipedias from $wgLogoHD to direct using of a SVG (T178942)]] (duration: 01m 59s)

Change was reverted. Something very bad is happening here, 5000 errors/minute.

Notice: Array to string conversion in /srv/mediawiki/php-1.31.0-wmf.12/includes/skins/Skin.php on line 937
Warning: strpos() expects parameter 1 to be string, array given in /srv/mediawiki/php-1.31.0-wmf.12/includes/OutputPage.php on line 3800

Mentioned in SAL (#wikimedia-operations) [2018-01-02T14:41:17Z] <zfilipin@tin> Synchronized wmf-config/InitialiseSettings.php: SWAT: [[gerrit:401509|Revert "Switch Wikipedias from $wgLogoHD to direct using of a SVG" (T178942)]] (duration: 00m 51s)

Mentioned in SAL (#wikimedia-operations) [2018-01-02T14:42:40Z] <zfilipin@tin> Synchronized static/images/project-logos/: SWAT: [[gerrit:401509|Revert "Switch Wikipedias from $wgLogoHD to direct using of a SVG" (T178942)]] (duration: 00m 51s)

Updated description with the correct configuration now. Sorry about that. Tested the correct configuration locally and i doint get that error now.

Change 401523 had a related patch set uploaded (by Urbanecm; owner: Urbanecm):
[operations/mediawiki-config@master] Switch Wikipedias from $wgLogoHD to direct using of a SVG

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

Krinkle subscribed.

TL;DR: SVGs can be very detailed, which can make them more expensive to download and render than PNGs (site performance) and can also cause rendering problems in browsers that support SVGs but don't have very good renderings (usability).


I'm blocking this on site performance and usability grounds until confirmed otherwise. While SVGs are nice in many ways, they are not by-definition better than PNGs for the purpose of rendering as fixed-size image on a web page.

The proposed configuration (SVG) does not render better than PNGs for the vast majority of use cases (any user reading the page at normal zoom level on a device with a pixel ratio of 1x, 2x or in-between).

Using an SVG would in theory make it effortless to render ideal-resolution images on devices with even higher pixel-densities, such as 3x of 4x, without us needing to create separate PNGs for those.

However, we should not do this technically-appealing change (saving future maintenance work) at the cost of site performance or usability, so we need to verify the following:

  • Do all supported browsers render these complex SVGs without issue? We have considered serving SVGs of graphs in articles instead of images in the past, and often decided not to. Because of inconsistent or incorrect renderings in some browsers. SVG renderings in browsers varied quite a lot.
  • Is the SVG smaller in file size than the current PNGs?

I haven't checked, but for the most part these SVGs from Wikimedia Commons are the original files used as reference material for designers. They are not optimised for web rendering or small-scale rendering (less than 200x200px) where most detail would be invisible anyway.

We should consider and verify this cost first. For example, we might need to generate lower-detail SVGs, or consider serving them only for densities above 3x or above 2x, depending on where the file-size benefit starts making sense.

As stated on the patch, please also take into account https://www.mediawiki.org/wiki/Manual:Coding_conventions/SVG when adding SVGs into production environments.

What @Krinkle said. On the www.wikipedia.org page, we converted the logos to SVG except for the Wikipedia logo and the Wikinews logo. These SVG's are just too big and complex to serve over the wire. The Wikipedia logo weighs in at 169kb (I'll give it 70kb gzipped & svgo'd), whereas the raster version is about 30kb.

Change 401523 abandoned by Urbanecm:
Switch Wikipedias from $wgLogoHD to direct using of a SVG

Reason:
See code reviews and the task

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

Urbanecm removed a project: User-Urbanecm.

Is it possible to request thumb-nailed version of the svg logos? This could remove the performance overhead and make it easy to update logos, instead of making different sized png and optimize them manually, this could be done in a deployment script.

From my point of view, with hi-res pngs (1.x, 2.x, 3.x...) we save load time (browser must parse svg vs. browser just loads png bitmap). We also avoid breakage on historical browsers (nothing special, but not bad too), we avoid some other minor rendering issues and color specifity and rendering differences between browsers, rendering backends and libraries, screen issues, ...

Is it possible to request thumb-nailed version of the svg logos? This could remove the performance overhead and make it easy to update logos, instead of making different sized png and optimize them manually, this could be done in a deployment script.

+1