Page MenuHomePhabricator

Provide logos for all projects
Closed, DuplicatePublicSpike

Description

Background

In T244486: Create new logos for all projects for DI header and T245190: Implement guidelines around logos creation we decided on the strategy and creating guidelines around the implementation of the new logos. Based on the findings of these two tasks we will need to provide SVG files for the wordmarks (and in certain cases taglines) for all sites in all projects. The status of what has been updated will be tracked in a dashboard (T252710).

Method for creating logos

TBD

Acceptance criteria

  • Provide SVG files for wordmarks and taglines — all sites, all projects

Event Timeline

ovasileva created this task.

can we use a script or should we manually create all of the logos - T244486

I couldn't resist fiddling with an automated approach yesterday.
I pulled down all the SVG's from https://commons.wikimedia.org/wiki/Wikipedia/2.0#SVG , which contains 271 localized Wikipedia logos.

I inspected these with the web inspector to see if they had any similarities.

  1. The word mark is identified with id="wikipedia" in 171 files
  2. The globe is identified with id="wikiglobe" in 257 files
  3. The tagline is identified with IDs tagline subline the_free_encylopedia text3378 in 90 files

With that I was able to generate 90 SVGs with just the tagline, and 171 with just the wordmark. They're not all perfect, because positioning & resizing the viewbox is tricky.

However, by taking the reverse approach and removing the wikiglobes instead, we can get 257 file. Assuming we're using 2 instead of 3 files, this might be preferable because we won't have to worry about correctly positioning the wordmark below the tagline. However, with the globeless versions the canvas is not resized. The logos might have to be re-centred with a GUI application, because I don't yet know if it's possible to resize the canvas based on the content via scripting.

I'm using this library for manipulating the logo elements: https://svgjs.com/docs/3.0/
and here are the results so far! https://github.com/j4n-co/wiki-logo-extraction (files in the noglobes, wordmarks, and taglines folders).

That's a great start @Jdrewniak! You officially carry the title “logo extractor” now. ;)

Next step in my opinion should be to squeeze all of those through SVGO. When looking for example at https://github.com/j4n-co/wiki-logo-extraction/blame/master/taglines/tagline-File:Wikipedia-logo-v2-als.svg it seems to me, that such script could also go for certain path x & y values and cut it accurately further to remove all whitespace.
Adding @thiemowmde here, who has provided a lot of insights on general SVG guidelines and optimization.

Sidenote, when going over the logos, we gonna throw the ids out via SVGO. Users don't need to have sent those, it doesn't provide anything down the wire.

Without knowing much about the project, I would like to suggest:

  • Drop the globe from all .svg images and make it a separate file.
  • Don't try to crop any of the images. Leave all of them as is, including the globe, and just position the two on top of each other using CSS.

Since I've gotten pretty good with the Inkscape CLI, I'll assign this task to myself and clean up the extraction script as well as the generated SVGs. I'm confident that I can extract the wordmarks/taglines for the other wikimedia projects as well.

Jdlrobson renamed this task from Create new logos for all projects to [SPIKE?] Create new logos for all projects.Mar 18 2020, 5:25 PM

Finally some updates on this logo stuff. I've managed to programatically extract a good chunk of 'em. Not all of 'em, but at least half of 'em.

@alexhollender I used your demo logo layout https://di-logo-sandbox.firebaseapp.com and plopped that onto a much bigger table:

👉 https://people.wikimedia.org/~jdrewniak/dip-logos/index.html 👈

Still a lot of blanks to fill in, but it's something.

@Jdrewniak incredible work. @Volker_E would you be able to take a closer look at the SVGs to determine if any additional optimization is needed?

Jdrewniak renamed this task from [SPIKE?] Create new logos for all projects to Create new logos for all projects.May 6 2020, 1:45 PM
Jdlrobson updated the task description. (Show Details)
alexhollender renamed this task from Create new logos for all projects to Provide logos for all projects.May 13 2020, 8:08 PM
alexhollender lowered the priority of this task from High to Medium.
alexhollender updated the task description. (Show Details)

@Jdrewniak What I meant to mention already earlier this week? Could we address SVG code standardization in this task as well? Via search & replace in the files?
Exemplified https://people.wikimedia.org/~jdrewniak/dip-logos/generated-logos/wiki/wordmarks/Wikipedia-wordmark-v2-an.svg with
width="118.496" height="22.167" and font related attributes that make no sense…

ovasileva raised the priority of this task from Medium to High.May 18 2020, 5:33 PM
ovasileva moved this task from Incoming to Triaged but Future on the Readers-Web-Backlog board.

@ovasileva how does this relate to T244486 ? could you update the description if it's different?

@ovasileva how does this relate to T244486 ? could you update the description if it's different?

I think T244486: Create new logos for all projects for DI header was meant to contain all questions and an overall strategy for providing logos, while this task would be for implementation. That said, I don't mind closing out the epic is we feel like this task can contain both.

Let's use a single ticket. This task is not really actionable as written and is "epic" like.