Presumably the configured SVG needs updating.

Is that task about the same? T279645: Wikipedia logo is blurry in Timeless, icon config lacking 2x or svg variant :)

No this is controlled by another SVG. This is the "tagline" key and T279645 is the "icon" key.

Can we fix this before enabling the default skin in July? :)

@Iniquity thanks for pointing this out. I hadn't realized that the SVGs were rendering less clearly than the PNGs used in Legacy Vector. And since I don't understand much about image rendering I'm a bit confused:

Legacy Vector uses PNGs for the logos, and Vector 2022 uses SVGs. This page has all of the PNGs, and the composite SVGs that I've been using to create the individual SVGs (one for the wordmark, and one for the tagline): https://commons.wikimedia.org/wiki/Wikipedia/2.0.

Looking at the original SVGs (i.e. before I've separated them into two pieces), the appearance of the tagline varries (link to file):

• • when viewing it on the Commons file page it looks correct:
    
  • when viewing the image directly in a browser window it looks incorrect:
    
• if I copy and paste the <img> tag used on the Commons File page into Vector 2022 it looks correct:
  
  <img alt="File:Wikipedia-logo-v2-ru.svg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Wikipedia-logo-v2-ru.svg/135px-Wikipedia-logo-v2-ru.svg.png?20110125092901" decoding="async" width="135" height="155" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Wikipedia-logo-v2-ru.svg/203px-Wikipedia-logo-v2-ru.svg.png?20110125092901 1.5x, https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Wikipedia-logo-v2-ru.svg/270px-Wikipedia-logo-v2-ru.svg.png?20110125092901 2x" data-file-width="135" data-file-height="155">

Could this mean that the issue we're seeing is not an issue with the SVGs themselves, but rather an issue with the way we're rendering the image in the HTML? The main difference seems to be the use of srcset in the HTML code on Commons, which is not used in Vector 2022.

As mentioned in the updated task description, @alexhollender_WMF and I looked at various options that could affect the SVG rendering on browsers:

I personally couldn't see much difference on my external monitor, but Alex noted that from all these options, the one with the extra 0.1px stroke applied to the SVG looks closest to the PNG.

Adding a 0.1px stroke to all the tagline SVGs is not a scalable solution though, so we might want to consider implementing a srcset option for the logo that would serve the PNG for low-resolution displays:

<img 
    srcset="/static/images/mobile/copyright/wikipedia-tagline-fr.svg 1.2x" 
    src="/static/images/mobile/copyright/wikipedia-tagline-fr.png"
/>

This would be a totally different API than what we currently have, and we would still have to upload PNG versions of all the logos (or serve the directly from commons?). I'm still not sure what the best solution from a technical perspective here is.

I had a chat with Jan about this today. Before going down a very expensive technical path, perhaps we could revisit the height of the tag line, at least for Russian Wikipedia? @alexhollender_WMF is this an option?

height	outcome
12px (current)
13px
14 px
15px

In T308286#8216198, @Jdlrobson wrote:

I had a chat with Jan about this today. Before going down a very expensive technical path, perhaps we could revisit the height of the tag line, at least for Russian Wikipedia? @alexhollender_WMF is this an option?

Happy to discuss changing the size of the tagline. Also to clarify, this issue is affecting all taglines, not just Russian.

Does the tagline appear blurred on https://ks.wikipedia.org/wiki/%D8%A7%D9%8E%DB%81%D9%8E%D9%85_%D8%B5%D9%8E%D9%81%DB%81%D9%95?useskin=vector-2022 or https://bn.wikipedia.org/?useskin=vector-2022 ? I can't replicate this myself but I'm curious if height is playing into this issue.

In T308286#8218366, @Jdlrobson wrote:

Does the tagline appear blurred on https://ks.wikipedia.org/wiki/%D8%A7%D9%8E%DB%81%D9%8E%D9%85_%D8%B5%D9%8E%D9%81%DB%81%D9%95?useskin=vector-2022 or https://bn.wikipedia.org/?useskin=vector-2022 ? I can't replicate this myself but I'm curious if height is playing into this issue.

some of the taglines are more difficult to compare than others, and in general the visual differences are difficult to see with such small elements. for BN the SVG in production is less crisply/smoothly rendered than the SVG with PNG fallback in Commons:

for KS the lines are too thin to be able to see a difference:

regarding increasing the size of the tagline, I don't believe that helps the clarity of the SVG:

I'm also now noticing that even the rendering of the wordmark (e.g. WikipediA) is pixilated on my external monitor (see images above).

comparison of Chrome, Safari, and Firefox:

Chrome	Safari	Firefox

Chrome seems slightly worse than the others

comparison of SVG vs PNG on Safari:

the PNG seems to be slightly crisper/smoother

@Jdrewniak Wonder if there are CSS properties (along the lines of anti-aliasing, GPU hacks etc.) or SVG attributes/filters to alter rendering.

Talking to Alex and Jan we agreed this is not a blocker for deployment. We have some options on how to fix this, but we don't think that's worth the investment at the current time. Jan will reply shortly with details about our options.

After trying all the rendering options possible: https://codepen.io/j4n/pen/mdxYwLN (image-rendering, canvas, stroke, transform etc). We haven't been able to make the SVG render the same as the PNG.

As such, we've discussed three possible ways to serve the PNG to low-resolution monitors instead:

1. Add srcset to the $wmLogos API
e.g.:

$wgLogos = [
  'tagline' => [
    'src' => '/static/images/mobile/copyright/wikipedia-tagline-en.svg',
 👉 'srcset' => '/static/images/mobile/copyright/wikipedia-tagline-en.png x1',
    'width' => 117,
    'height' => 13,
  ],
  'wordmark' => [
    'src' => '/static/images/mobile/copyright/wikipedia-wordmark-en.svg',
 👉 'srcset' => '/static/images/mobile/copyright/wikipedia-wordmark-en.png x1',
    'width' => 119,
    'height' => 21,
  ],
];

result:

<img 
  class="mw-logo-tagline" 
   alt="Wikipedia" 
   src="/static/images/mobile/copyright/wikipedia-tagline-en.svg" 
👉 srcset="/static/images/mobile/copyright/wikipedia-tagline-en.png x1"
   width = 117,
   height = 13,
/>

2. Generate the srcset automatically from SVGs
The result would be the same as above, however the PNGs would be generated automatically (like thumbnails on Commons) for 1x displays, if an SVG is provided.

3. On-wiki overrides via CSS
Given this might be more of an issue on some wikis then others, it might make sense to wait and see if a platform-wide solution is worth implementing. In the mean time, this issue can be addressed on a per-wiki basis via CSS. For the ruwiki tagline for example, the following CSS can be added to the MediaWiki:Vector-2022.css page to replace the tagline with a PNG at low resolutions.

@media screen and ( -webkit-max-device-pixel-ratio: 1 ) {
  .mw-logo-tagline {
    content: url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Wikipedia-tagline-ru.svg/117px-Wikipedia-tagline-ru.svg.png');
  }
}

Hi, perhups this is for the same task? if not, please notify me so I will open a new task. On fr.wiki some users notice a bug concerning some SVG logos: e.g. by clicking on the logo here, you see it on wp, but if you click again on the svg logo you see only the code. This is not happening with all logos, and this was not happening in the past, the user says.

In T308286#8257220, @Patafisik wrote:

Hi, perhups this is for the same task? if not, please notify me so I will open a new task. On fr.wiki some users notice a bug concerning some SVG logos: e.g. by clicking on the logo here, you see it on wp, but if you click again on the svg logo you see only the code. This is not happening with all logos, and this was not happening in the past, the user says.

Totally unrelated, please file a separate task

In T308286#8257220, @Patafisik wrote:

Hi, perhups this is for the same task? if not, please notify me so I will open a new task. On fr.wiki some users notice a bug concerning some SVG logos: e.g. by clicking on the logo here, you see it on wp, but if you click again on the svg logo you see only the code. This is not happening with all logos, and this was not happening in the past, the user says.

In T308286#8257281, @TheDJ wrote:

In T308286#8257220, @Patafisik wrote:

Hi, perhups this is for the same task? if not, please notify me so I will open a new task. On fr.wiki some users notice a bug concerning some SVG logos: e.g. by clicking on the logo here, you see it on wp, but if you click again on the svg logo you see only the code. This is not happening with all logos, and this was not happening in the past, the user says.

Totally unrelated, please file a separate task

Thank you, done here T318471

This looks awful and is far too small. The tagline appears to be using a font size of approximately 9.5px.

Hello we have tried to generate a pixel fitted version of ru tagline in an effort to see if this fix makes any difference with rendering on low resolution screen. It is not 100% pixel fitted due to curves in the type... if we try to adjust those curves it would change the look. But we tried to have the closest fit. This process can take a long time to do for all logos so we need a more scalable solution to fix this issue overall (e.g. use png on low resolution or increase size). However, we just wanted to try this and see if it works for ru.

@jdrewnaik link to the file

Sorry, just getting back to this. I tested the new wordmark on my local. I'm on a retina monitor so I can't say if it looks better (though I think it does), but it's also a little bit larger than the current tagline, which I think would help too. Would this arrangement be OK?

Have you considered removing the tagline altogether? Or write it in plain text not image?

@ZMcCune following up on our chat in the kitchen - knowing how to fix this might require some help talking through brand guidelines and working out if the web team is the best owners of this work. The current brand guidelines of taglines in Italics in standard font do not seem compatible with Cyrillic text for example. Who would be the best person in your team to talk about this?