Skip to content

jandre3000/wiki-logo-extraction

Repository files navigation

Wikimedia project logos for the Desktop Improvements Project

One of the features of the Wikimedia foundation's Desktop Improvements Project is a new logo arrangement, which deconstructs project logos into three distinct pieces: an icon, a word-mark and a tagline. Since the designs remain the same, this repository is a collection of scripts that attempt to programmatically extract the existing logos into these three pieces.

Understanding that programmatic extraction can only get us so far, affordances are also made for hand-made or modified logos.

Folder structure

- scripts/

A collection of node and bash scripts that are responsible for downloading the original logos, programmatically extracting the different pieces, and optimizing all logos, including the hand-made ones.

- original-logos/

This is where the original SVGs are downloaded, usually from category pages on Commons.

- generated-logos/

Logo pieces extracted from the originals. These are uncompressed, as saved by Inkscape. They may contain errors and should not be used without manual inspection.

- hand-made-logos/

To fill in the gaps, manually created logos can be placed here. They do not have to be optimized or created in Inkscape.

- optimized-logos/

All the logos in generated-logos/ and hand-made-logos/ with their titles normalized (downcased) some values cleaned up (like decimal values for width/height generated by Inkscape) and optimized with SVGO. The hand-made logos override the generated ones.

Methods

The extraction scripts are created on a per-project basis. Different strategies are used for different projects, but by-in-large the extraction depends on the Inkscape CLI. Extraction works best when the originals have a similar XML structure. If similar ID's exist in the markup, the --export-id Inkscape option is used. Sometimes the SVGDOM and SVG.JS libraries are required to extract specific, non-ID related elements in the SVG (e.g: all elements with a certain style attribute).

Workflow

Extracting logos

Scripts have to be run individually on a per-project basis. Inkscape is required to run the scripts. The master branch of Inkscape 1.0 was used to generate most of the logos.

NOTE: Many original logos are made with Inkscape v. pre 9.2, and every time they open, a dialog asking to convert the documents DPI size appears. I tried, ubt was unable to update the originals via the Inkscape CLI.

Manual addition

Hand-made logos can be placed into the hand-made-logos/ folder. They do not have to be made with Inkscape, since they'll be optimized pretty well with SVGO anyway. They should follow the naming convention of {project-[wordmark|tagline]-language.svg}

Optimization

The SVGO config is at .svgo.yml it follows the Wikimedia SVG guidelines except it enables the cleanupIDs option, which has proved to provide a substantial size reduction in this case.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published