User:AHollender (WMF)/sandbox/Creating logo svgs for Vector 2022

A wiki project logo typically has two or three parts: an icon, a wordmark, and (optionally) a tagline. In Legacy Vector the logos are a single PNG (icon + wordmark + tagline). In Vector 2022 the logos are three separate SVGs: one for the icon, one for the wordmark, and one for the tagline. Using SVGs allows for higher quality rendering of the logos, as well as the ability to reformat the logo across various screen sizes (e.g. only showing the wordmark at mobile screen sizes).

The current problem

Many wiki projects have unique logos (most commonly the wordmark and/or the tagline is unique, and sometimes, though much less often, the icon is unique). However most of these unique logos only exist as PNGs, or composite SVGs (i.e. not the three individual SVGs needed for Vector 2022). What happens when you try to load a wiki project that doesn't have the necessary SVGs, with the Vector 2022 skin? The English version of the wordmark and/or tagline is shown if it exists, otherwise the wordmark and/or tagline is rendered in plain text, neither of which are not ideal. For example:


Gothic Wikipedia (Legacy Vector)	Gothic Wikipedia (Vector 2022)

correct display of logo	missing logo, falling back to English wordmark (no tagline)
Limburgish Wikinews (Legacy Vector)	Limburgish Wikinews (Vector 2022)

correct display of logo	missing logo, falling back to plain text

Task for WMF design team

We need to create SVGs for all of the unique wiki project wordmarks and taglines. All of the Wikipedia project logos have already been done (thanks again to Matthew, Olga, and Sudanshu), so what remains is ~455 sister project logos (e.g. Wikibooks, Wikiquote, Wikinews, etc.). As mentioned above most projects don't have custom icons, so most of our work will be creating the SVG versions of wordmarks and taglines. Below are the instructions to follow, as well as a video demonstration of me creating some wordmarks and taglines.

Instructions

Getting setup

Make a copy of the Figma file (Wiki project logos for Vector 2022)
Locate your set of wiki projects in the spreadsheet (there should be about 25 per-person)
(Optional) Watch this video of me creating some SVGs

Steps (for each row assigned to you in the spreadsheet)

*If you get stuck on any step you can skip the row (just mark the row red and add a note in the notes column saying what you got stuck on)

Visit the URL of the project to see what the current logo is
Locate the corresponding SVG on Commons (if it exists), and download it
- You can either search within the category linked in the Commons category column (using find-in-page type in the language code). Or you can search for it directly on Commons (e.g.ar wikiquote logo, then filter the file type to svg).
- There might be several SVGs, so make sure you get the one that matches the current logo on the wiki project
- If the project uses an English wordmark and/or tagline, but you find a language-specific one on Commons, feel free to proceed with the language specific one
- If the SVG is not on Commons you have two choices:
  1. Skip to the next row (just mark the row read and leave a note in the notes column)
  2. Create the SVG(s) from scratch (see section below for details)
Determine if the icon, wordmark, and tagline are unique
- Use the table in the Figma file to figure out which parts of the logo are unique. You only need to make SVGs of the unique parts, so, for example, if the icon and wordmark are not unique, you only need to make an SVG of the tagline.
- Aside from Wiktionary the icon will almost never be unique
- Wiktionary and Wikibooks are the only two sister projects with taglines, so for the rest of them you only need to think about wordmarks and icons (though there may be an occational outlier, like Pau recently found with French Wikisource).
- If no parts of the logo are unique, leave a note in the row and mark it as complete
Simplify paths, resize, rename, and export the individual SVGs
- Open the SVG you downloaded from Commons in Figma
- Grab the parts you need and delete the rest (e.g. if you don't need the icon, delete it)
- Simplify the grouping as much as possible
- Resize the wordmark and/or tagline based on the max-sizes provided in the row
  - You are trying to make the wordmark as big as possible without the width or height exceeding the max-size
  - Size the tagline relative to the wordmark — sometimes it looks best if it matches the width of the wordmark, sometimes making it slightly more narrow or slightly wider looks good. Reference what the current logo is sized, combined with your best judgement.
- Rename the wordmark and/or tagline (e.g. wikibooks-wordmark-pt, wikiquote-tagline-bn)
- Adjust the X,Y coordinates of the wordmark and/or tagline to 0,0 (so there is less information in the SVG file)
- Export it:
  - Export the optimized logo with help from Figma’s SVG Export plugin. This will make sure that the icon code is as small as possible without quality/visual loss. See also Codex “Designing icons…” documentation for screenshots.
  - Find the SVG Export plugin using the “Plugins” section in Figma’s main menu and run it. Before exporting the icon, please import the preset “WikimediaUI” (download link for JSON file) [– Rita also posted a downloadable file in designprivate Slack]. The import option is available from a menu in the “Presets” panel.
  - Apply the WikimediaUI SVGO presets to the icon to be exported, then proceed to export the icon using the “Export all” button
  - Compare the logo visually to ensure optimization was lossless

When you are finished

Put all of your exported SVGs in the folder with your name on it (link to parent folder)
Send Sneha a Slack message with a link to your Figma file

Creating SVGs from scratch

There are two things you need to create the SVG from scratch:

The plain text string(s) of the wordmark and/or tagline
The appropriate font

If you are familiar with the script, and can find (or recognize) the font it can be fairly straight forward. In Figma paste (or re-type) the text of the wordmark and/or tagline in the correct font, and convert them to outlines.

If you are not familiar with the script it's a bit more of an adventure. You can either ask someone who does know the script to type out the wordmark and/or tagline for you (so you have it in plain text), or you can hunt around for it in the HTML (it's usually in there somewhere). Then you have to figure out what font is being used. Sometimes it says the font on the PNG version of the logo on Commons. Or you can see who uploaded the PNG version of the logo to Commons and write them on their talk page. It's definitely satisfying if you're able to figure it out : )