Kommandozeilen-Tools
- SVGO (Scheint der größte Akteur zu sein)
- Scour
- svgcleaner
Leider wird keines¹ davon mehr gepflegt. Du musst auch nicht nur eines verwenden².
SVGO mit einem Task Runner
Desktop-Anwendungen
- ImageOptim (macOS)
- macOS „Ordneraktion“
- Vor macOS 10.15 Catalina konnte man SVGO GUI verwenden, aber es ist 32-Bit, was es obsolet macht.
Es gibt generische Apps zur Optimierung von Bildern unter Windows und Linux, aber ich konnte bisher keine bestätigen, die SVG verarbeiten.
Web-Anwendungen
Die Idee bei diesen Tools ist, dass Sie ein SVG auf Ihrem Computer haben und es auf diese Web-App hochladen, um dieses eine SVG zu optimieren.
APIs
- ImageOptim Web Service API
- Kraken
- Imgix unterstützt SVG wenn Sie sich dafür entscheiden.
- Es ist nicht ganz klar, ob Cloudinary SVG tatsächlich *optimiert*, und ihre API ist auf das Hochladen ausgerichtet, aber sie unterstützen „Transformationen“ von SVG, und ihr Fetch-URL-Format ist API-ähnlich.
Direktes Optimieren aus Design-Tools
Typischerweise, wenn Sie SVG aus einem Design-Tool exportieren, ist es in dringend benötigtem Zustand der Optimierung. Daher all die Werkzeuge in diesem Artikel. Das Design-Tool selbst kann jedoch zumindest teilweise helfen.
- Sketch's svgo-compressor (es gibt auch eine spezielle Web-App für Sketch namens SVGito)
- Figma macht standardmäßig sein Bestes
- Illustrator hat SVG NOW
- Inkscape kann als „Optimized SVG“ exportieren (verwendet intern Scour) oder SVGO-Inkscape verwenden
Vertiefende Artikel
- Michelle Barker: Optimizing SVGs for the Web
- Jayden Seric: How to optimize SVG
- Sara Soueidan: Tips for Creating and Exporting Better SVGs for the Web & Useful SVGO[ptimization] Tools
- Cosima Mielke: Tools And Resources For Editing, Converting And Optimizing SVG
- Jake Giltsoff: SVG on the Web, Preparing & Optimising
- Andreas Larsen: Optimising SVGs for Web Use
- Josh Stoik: Optimizing SVGs For Web Use
Manuelle/Hand-Optimierungsarbeit für SVG
- Raymond Schwartz: Understanding and Manually Improving SVG Optimization
- Amberd Design Studio: How to Optimize an SVG File Step-by-Step
- Video von uns: Reducing vector points in Illustrator
- Video von Kevin Powell: How to create, clean up, and optimize an SVG
- Präsentation von Brenda Storer: Cracking the SVG Code
- Dudley Storey: SVG Optimisation: The Basics
- Nicht mehr gepflegte Referenzen: SVGO, Scour, svgcleaner. UPDATE: SVGO hat wieder einen Maintainer.
- Johannes Kalliauer von Wikipedia (der mich über die breitere Landschaft von Kommandozeilen-Tools informierte) sagt, dass jedes der Tools seine Vorteile hat. SVGO ist zwar beliebt, aber auch am fehleranfälligsten. svgcleaner ist das schnellste. Scour und svgcleaner können auch beschädigte SVG reparieren, SVGO jedoch nicht.
Lebensretter! Ich habe nach einem Tool gesucht, das Styles automatisch in einen SVG-Tag einfügt. Sieht aus, als würde Vecta das tun. Danke!
Beachten Sie, dass, wenn Sie etwas Schnelleres als SVGO benötigen (das auch als eigenständige Binärdatei funktioniert), svgcleaner genau das Richtige für Sie sein könnte :)
@chriscoyier Es gibt drei (nicht eines) gängige Kommandozeilen-Tools: scour, svgcleaner und svgo. Alle drei werden nicht mehr (aktiv) entwickelt/fehlerbereinigt. Siehe Referenzen [16-18] in https://commons.wikimedia.org/wiki/Help:SVG#Tidying_up. svgo ist meiner Meinung nach das fehleranfälligste (zumindest für Wikimedia-Dateien) dieser drei Optimierer.
svgo wird in https://fedoramagazine.org/design-faster-web-pages-part-2-image-replacement/ als nicht mehr entwickelt gemeldet, was vom Entwickler bestätigt wird: https://github.com/svg/svgo/issues/1055#issuecomment-431913656
Bitte lesen Sie https://commons.wikimedia.org/wiki/User:JoKalliauer/Optimization#Using_Optizatiors, es enthält nützliche Informationen über verschiedene Optimierungswerkzeuge (anstelle eines, das in mehreren Implementierungen verwendet wird).
scour und svgcleaner können verwendet werden, um beschädigte (oder falsch gerenderte) SVGs in https://tools.wmflabs.org/svgworkaroundbot/ zu reparieren, was SVGO meiner Meinung nach nicht kann (wenige Ausnahmen).
svgcleaner ist viel schneller (bei gleicher Bereinigungsrate) als svgo, siehe https://github.com/RazrFalcon/svgcleaner#charts
Die Empfehlung von https://github.com/juanfran/svgo-inkscape ohne Erwähnung von scour ist absurd, da scour eine eingebaute Funktion ist. Speichern Sie es einfach als „Optimized SVG (*.svg)“, Sie müssen nichts zusätzlich installieren.
Ich sage nicht, dass svgo schlechter ist als scour oder svgcleaner, ich sage nur, dass es drei Optimierer gibt, die jeweils ihre eigenen Vorteile haben. Für Anfänger würde ich eher scour oder svgcleaner empfehlen, da sie meiner Meinung nach weniger fehleranfällig sind.
Ich habe auch kürzlich svgcleaner gefunden. Es ist eine Alternative zu SVGO, geschrieben in Rust, das schnellere, kleinere und korrektere SVGs ausgibt.
Ich würde von SVGO abraten, da es standardmäßig Lizenzinformationen aus Ihren SVGs entfernt, was illegal sein könnte, wenn man SVGO blind verwendet (z. B. tief in der Abhängigkeitskette wie creat-react-app). Ein Beispiel wäre
CC BY.
Im Falle von jemandem, der die Lizenzinformationen von einem Editor wie Inkscape einbettet, sind bereits all diese Informationen in einer *angemessenen Art und Weise* enthalten, die keine Verletzung darstellt. Sofern es keinen separaten Build-Schritt gibt, um diese Informationen zu extrahieren, gehen sie verloren und stellen eine Verletzung dar. SVGO behandelt diese Metadaten als „Editor-Daten“ und kann sie nicht trennen: Sie erhalten entweder alle zusätzlichen Daten des Editors, die er anhängt, um die zukünftige Bearbeitung zu verbessern, oder Sie erhalten eine große Datei. Der Autor hat erklärt, dass dies kein Fehler ist, aber viele Tools hängen von SVGO im Frontend-Tooling-Workspace ab, was standardmäßig zu Lizenzverletzungen führt und Benutzer möglicherweise nicht wissen.