SVG-Optimierung mit SVGO-Tools und -Plug-ins
Kommentare

SVGs bieten Webdesignern viele Vorteile gegenüber anderen Bildformaten, insbesondere, wenn es um die Einbettung von Bildern in Responsive Webdesigns geht. Ein wichtiger Schritt bei der Arbeit mit SVGs ist die Optimierung des SVG-Codes, bevor dieser in die Webseite eingebettet wird.

Es gibt zahlreiche Tools, die diese Aufgabe übernehmen. Sara Soueidan hat einige solcher SVG-Optimierungstools in ihrem Blog vorgestellt.

SVG-Optimierung mit SVGO und dem SVGOMG GUI

Zur Optimierung des SVG-Codes gibt es verschiedene Tools auf dem Markt. Eines davon ist zum Beispiel SVGO, ein SVG-Optimierungstool, das auf node.js basiert und verschiedene Tools und Plug-ins mit sich bringt, die sich in fast jeden Workflow integrieren lassen. Allerdings hat SVGO auch einen entscheidenden Nachteil: es kann leicht dazu führen, dass die SVGs nicht richtig funktionieren, was sich aufgrund einer mangelnden Vorschau der Ergebnisse nicht absehen lässt.

Um dieses Problem zu beheben, erstellte Jake Archibald das SVGOMG GUI. Mit diesem Interface können die SVGs mit einer Auswahl von Optimierungsmöglichkeiten bearbeitet werden; anschließend lässt sich eine Vorschau der optimierten SVGs anzeigen, um Optimierungen, die das SVG beeinträchtigen würden, aufspüren und deaktivieren zu können. Genauso gibt es die Möglichkeit, sich die Originalversion der SVG-Datei anzeigen zu lassen, um sie mit der bearbeiteten Version vergleichen zu können.

SVGOMG ist ein Online-Tool, das sich allerdings auch in Browsern mit ServiceWorker-Support, beispielsweise Chrome, Firefox oder Opera, verwenden lässt.

SVG NOW, SVG GUI und weitere Plug-ins

Neben SVGOMG bieten auch andere Tools ein GUI, das dem Nutzer erlaubt, die gewünschten Optimierungen auszuwählen und auf das SVG anzuwenden. So zielt beispielsweise das Illustrator-Plug-in SVG NOW darauf ab, den generierten SVG-Code mit SVGO nachzubearbeiten. Allerdings bietet auch SVG NOW keine Live-Preview, mit der sich die Auswirkungen der angewandten Optimierungen überprüfen lassen.

Ein weiteres GUI für SVGO ist das SVGO GUI, mit dem SVG-Datei per Drag-and-Drop verschoben und so besonders schnell optimiert werden können. Zwar ist dieses Tool nützlich, wenn viele SVGs auf einmal optimiert werden sollen, allerdings ist ein voriges Backup der Originaldateien unabdingbar, da diese beim Optimierungsvorgang direkt mit der bearbeiteten Version ersetzt werden.

SVGO kommt sowohl mit einem Grunt-, als auch mit einem Gulp-Plug-in, die das beliebige Aktivieren und Deaktivieren von SVG-Optimierungen – etwa dem Entfernen des viewBox-Attributs – erlauben.

Natürlich gibt es noch weitere SVG-Optimierungstools auf dem Markt, allerdings bietet SVGO dank zahlreicher Optimierungsmöglichkeiten und seiner Plug-in-basierten Architektur bereits vielfältige Einsatzmöglichkeiten, um die Arbeit mit SVGs zu vereinfachen.

Aufmacherbild: Blue key with Optimization word on laptop keyboard. von Shutterstock / Urheberrecht: Cienpies Design

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -