SVGs in our products feature all kinds of markup, in parts with editor specific metadata, resulting in unnecessary inconsistency and bloat.
We're using SVGO for optimization and go for manual QA, both on code and visual level.
**Optimizations achieved are between 3%–27% file size on average before gzipping, in a few cases of MMV even up to 78%.**
Among changes:
- Unify XML declaration, preferable (altough maybe slighly esoteric) with uppercase UTF-8: `<?xml version="1.0" encoding="UTF-8"?>`
- Removing additional DOCTYPE
- Setting of `width` and `height` attributes together with `viewport` for widest cross-browser compatibility, example: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">`
-- Removing `standalone="no"` attribute as its default
-- Removing `px` value unit as it's default
-- Removing non-standard `enable-background` attribute, removed from SVG standard altogether
- Reduction of `id`s where applicable
- Changing indentation to use tabs & reduce whitespace where applicable, example: `"/>` not `" />`
- Minify and lowercase colors, example: `#fff` not `#FFFFFF`
- Collapsing useless groups `g`
- Merging paths where applicable
- Removing editor (InkScape, Illustrator etc.) data
- Removing unnecessary `style` attributes where applicable
- Removing unused `def`s
- Removing raster images where applicable
- Sorting attributes
---
Products optimized:
[x] MediaWiki core – https://gerrit.wikimedia.org/r/#/c/386254/
Themes:
[x] Vector – https://gerrit.wikimedia.org/r/#/c/386134/
[x] MinervaNeue – https://gerrit.wikimedia.org/r/#/c/389290/
Extensions:
[x] CentralNotice – https://gerrit.wikimedia.org/r/387494
[x] Cite – https://gerrit.wikimedia.org/r/388161
[x] Echo – https://gerrit.wikimedia.org/r/#/c/389230/
[x] StructuredDiscussions (Flow) – https://gerrit.wikimedia.org/r/#/c/390557/
[x] GettingStarted – https://gerrit.wikimedia.org/r/#/c/384334/
[x] GuidedTour – https://gerrit.wikimedia.org/r/383415
[x] Kartographer – https://gerrit.wikimedia.org/r/#/c/387164/
[x] MobileFrontend – https://gerrit.wikimedia.org/r/#/c/373898/ Savings between 5 and 21% in file size
[] MultimediaViewer – https://gerrit.wikimedia.org/r/388833
[x] OOUI – https://gerrit.wikimedia.org/r/387372 Savings between 3 and 27% in file size
[x] PagePreviews (Popups) – https://gerrit.wikimedia.org/r/#/c/384432/
[] RelatedArticles
[x] Translate – https://gerrit.wikimedia.org/r/#/c/380062/
[x] UniversalLanguageSelector – https://gerrit.wikimedia.org/r/#/c/387992/
[x] VisualEditor – https://gerrit.wikimedia.org/r/#/c/388933/
Projects:
[x] Portal – https://gerrit.wikimedia.org/r/#/c/377881/ & extended with more images https://gerrit.wikimedia.org/r/387192
[] Style Guide – https://github.com/wikimedia/WikimediaUI-Style-Guide/pull/54