Page MenuHomePhabricator

Provide tools for contributors to optimize SVG files
Open, Needs TriagePublic

Description

SVG files can be svelte and fast, but they can also be huge and overly detailed or inefficiently structured, so a similar appearance can result in either a small or large file.

For performance reasons we want SVGs that we might render client-side T5593 to be small and fast.

Possible automatable tools:

  • display the actual transfer size as modifications are made! (post-gzipped)
  • strip comments/whitespace (minification)
  • trim unnecessary digit precision on coordinates
  • rewriting paths to use fewer points
  • eliminating detail that will never be seen in context

External tools for various optimization tasks:

Event Timeline

Restricted Application added subscribers: Zppix, Steinsplitter, Aklapper. · View Herald Transcript

At least simple SVGs should be 'optimized' by hand instead of via 'automatable tools' that make them unreadable.
Cf. https://commons.wikimedia.org/wiki/Template:Created_with_Text_Editor

There is a tool on toolforge: https://svgworkaroundbot.toolforge.org/

It would be great if this can be opt-in implemented

I do not recommend it for uploaded files (except there are renderingissues), see https://commons.wikimedia.org/wiki/User:JoKalliauer/Optimization for reasons

I would decline this task. WMF is not in the tool business, and the tool would require enormous/impossible sophistication.

In addition, we do not want sledgehammer tools applied to SVG files. Every so often, a user discovers svgo and starts applying it to Commons files just to reduce the size. It ends up breaking files because librsvg does not parse path syntax correctly. It removes metadata that removes author and license information and may violate license terms. Removing comments and linebreaks in a hand-edited file is an insult to original author.

Yes, reducing digits of precision will reduce file size, but determining the appropriate accuracy is nontrivial.

Reducing the number of nodes in a path is not a trivial operation. It may open seams.

How will unneeded detail be determined? The SVG map for 2022 Russian Invasion of Ukraine has a lot of detail. The file is intended to be zoomed and panned rather than displayed as a monolith.

I would like the SVG file page to display the file size and the compressed file size, but that should be a separate issue.