Eine Illustration, drei SVG-Ausgaben

Nehmen wir an, wir zeichnen dieselbe Vektorgrafik in verschiedenen Designanwendungen und exportieren jede als SVG für die Verwendung im Web. Sollten wir von jeder Anwendung die gleiche SVG-Datei erwarten?

Einerseits könnten wir erwarten, dass jede Datei gleich ist, aufgrund unserer bisherigen Erfahrungen beim Exportieren von Bildern. Anwendungen waren typischerweise konsistent beim Speichern von JPGs, PNGs und GIFs, vielleicht mit geringfügigen Unterschieden in der Gesamtdateigröße.

Andererseits ist SVG anders als unsere üblichen Bilddateien und unsere Erwartungen müssen sich an diese Unterschiede anpassen. Die Ausgabe von SVG mag visuell sein, aber worüber wir wirklich sprechen, sind Mathematik und Code. Das bedeutet, eine SVG-Datei ist ein wenig vergleichbarer mit einer CSS-Datei, die aus einem Präprozessor kompiliert wurde. Ihre Ergebnisse können je nach der verwendeten Kompilierungsmethode variieren.

Ich habe beschlossen, dieselbe Illustration in Illustrator, Sketch und Figma zu zeichnen und den exportierten SVG-Code zu vergleichen. Dieser Beitrag wird diese Ergebnisse zusammenfassen.

Über die Illustration

Es ist nichts Besonderes. Ein einfaches Pluszeichen mit weißer Füllung auf einem Kreis mit schwarzer Füllung. Die Idee war, etwas zu verwenden, das einem Icon ähnlich ist, das auf jeder Website üblich wäre.

Die Illustration wurde dreimal gezeichnet, einmal in jeder Anwendung. Das Erstellen des Icons in einer Anwendung und das anschließende Kopieren und Einfügen in eine andere schien kein fairer Vergleich zu sein. Dies erlaubte jeder Anwendung, das SVG mit ihren eigenen nativen Werkzeugen zu interpretieren. Ich bin nicht der versierteste Illustrator, also habe ich die Illustration einmal erstellt und sie dann in den anderen Anwendungen nachgezeichnet, um sicherzustellen, dass alles skaliert und alle Punkte nahezu identisch waren.

Über den Vergleich

Es ist erwähnenswert, dass dieser Beitrag sich überhaupt nicht mit dem „besten“ Export der Gruppe befasst. Interessanter ist (1) ob es Unterschiede gibt, wie SVG-Code kompiliert wird, und (2) wie sich diese möglichen Unterschiede auf einen Front-End-Workflow auswirken oder sogar, welche Anwendung besser für ein bestimmtes Projekt geeignet ist.

Hier wird verglichen

• Dateigröße
• Code-Struktur
• Namenskonventionen

Eine weitere erwähnenswerte Sache ist, dass wir in diesem Vergleich von Standard-Exportoptionen ausgehen. Illustrator hat eine robuste Reihe von Optionen, die komplett ändern können, wie eine SVG-Datei gespeichert wird, während andere das nicht tun. Ich habe mich entschieden, die Standard-Export-Einstellungen von Illustrator zu verwenden, mit der geringfügigen Ausnahme, den Code beim Export nicht zu minifizieren.

Alles klar? Schauen wir uns die Ergebnisse an.

Code-Vergleich nebeneinander

Dies wurde 2017 geschrieben. Apps wie diese entwickeln sich weiter. Figma zum Beispiel hat verbesserte SVG-Exporte bloggt. SVG hat direkt gesegnete Optimierungs-Plugins. Und Sie sollten Ihre SVG sowieso optimieren! 💪

Tabellarischer Vergleich

Vergleich	Illustrator	Sketch	Figma
Export-Einstellungen	Ja	Nein	Nein
Dateigröße	498 Bytes	946 Bytes	1 KB
XML-Header	Nein	Ja	Nein
Enthält Attribute und	Nein	Ja	Ja
Enthält Attribut viewBox	Ja	Ja	Ja
SVG-ID	Ja	Nein	Nein
SVG-ID-Name	Generiert	NA	NA
SVG-Daten-Namensattribut	Ebenenname	NA	NA
Titel-Tag (<title>)	Dateiname	Artboard-Name	Ebenenname
Beschreibungs-Tag (<description>)	NA	Erstellt mit Sketch	Erstellt mit Figma
Enthält Definitionen (<defs>)	Nein	Ja	Ja
Enthält Gruppen (<g>)	Ja	Ja	Ja
Gruppen-ID-Name	NA	Organisiert nach Seitenname, Artboard, Gruppe, dann Ebene	Organisiert nach Rahmen, Gruppe, dann Ebene
Enthält Verwendung (<use>)	Nein	Nein	Ja

Zusammenfassung des Vergleichs

Das sind ziemlich interessante Ergebnisse. Wie ich bereits erwähnte, ist das Ziel hier nicht, einen Gewinner zu erklären, wer die Dinge am besten macht^™, sondern zu beurteilen, ob es Unterschiede gibt – und es gibt definitiv Unterschiede!

Dateigröße

Ein großer Vorteil von SVG im Allgemeinen ist seine geringe Dateigröße im Vergleich zu Rasterbildern. Dieser Vorteil zeigt sich in allen drei Fällen. Zum Beispiel war dasselbe Icon, das in Sketch als PNG exportiert wurde, 12 KB groß. Die SVG-Ausgabe von Sketch spart 97 % gegenüber seinem PNG-Gegenstück.

Ich bin mir nicht sicher, ob die Unterschiede in der Dateigröße zwischen den drei Ergebnissen hier wirklich entscheidend sind, trotz der Tatsache, dass die Ausgabe von Illustrator eine Dateigröße ergibt, die ~30 % kleiner ist als die Ausgabe von Figma. Ich sage das nur, weil es wahrscheinlich ist, dass die SVG-Datei, die in der Produktion verwendet wird, minifiziert und zwischengespeichert wird, was alles sehr vernachlässigbar macht.

Dennoch könnte die Tatsache, dass es überhaupt einen Unterschied in der Dateigröße gibt, beeinflussen, welche Build-Tools Sie für Ihren SVG-Workflow verwenden und wie die Einstellungen für dieses Build-Tool konfiguriert sind.

Code-Struktur

Der Unterschied in der Dateigröße liegt wirklich darin, wie jede Anwendung den kompilierten Code strukturiert. Beispielsweise ist Figma sehr auf Gruppierung und Definition von Formen und Pfaden fixiert, um sie in verschiedenen Kontexten wiederverwendbarer zu machen, während Illustrator sie komplett vermeidet und die Datei tendenziell leichter direkt einfügbar macht.

Auch hier ist das Ziel nicht, zu bestimmen, ob ein Ansatz besser ist als der andere, sondern anzuerkennen, dass unterschiedliche Philosophien in die generierte Datei einfließen und dies helfen sollte, das richtige Werkzeug für die aktuelle Aufgabe zu bestimmen. Möglicherweise erhalten Sie in einer Situation eine kleinere Dateigröße, aber vielleicht mehr Flexibilität in einer anderen, je nach Ihren Bedürfnissen und Prioritäten.

Namenskonventionen

Ein weiterer Beleg dafür ist, wie Illustrator standardmäßig eindeutige generierte IDs für das <svg>-Element verwendet. Das macht das direkte Einfügen der Datei weniger anfällig für Konflikte mit anderen Inline-Dateien, bei denen ein Designer möglicherweise dieselben Datei-, Artboard- oder Ebenennamen über mehrere Dateien hinweg verwendet hat. Im Gegensatz dazu verwenden weder Sketch noch Figma eine ID direkt auf dem SVG-Element.

Es gibt Build-Tools, die beim Erstellen von ID- und Klassennamen helfen, aber wenn Sie damit beauftragt sind, eine SVG-Datei manuell zu bearbeiten oder eine Datei aus irgendeinem Grund so verwenden müssen, wie sie Ihnen zur Verfügung gestellt wird, dann kann die Kenntnis, wie eine Anwendung benennt, beeinflussen, wie Sie an Ihre Arbeit herangehen.

Zusammenfassend

Die wichtigste Erkenntnis für mich aus diesem Vergleich ist die Erinnerung, dass SVG letztendlich Code ist. Die Anwendungen, die wir zum Illustrieren von Vektorgrafiken verwenden, sind lediglich eine GUI zum Erstellen von Code, und die Art und Weise, wie dieser Code geschrieben wird, wird wahrscheinlich unterschiedlich sein, je nachdem, wer ihn schreibt.

Es ist wirklich nicht anders als bei etwas wie dem CodePen Rodeo (wann ist das nächste?), bei dem ein einzelnes Design bereitgestellt wird und viele Leute es auf ihre eigene Weise codieren. Es gibt keine „richtige“ Art, es zu codieren, aber es macht Spaß zu sehen, wie verschiedene Leute unterschiedliche Wege einschlagen, um dasselbe Ergebnis zu erzielen.

Die Quintessenz, die durch diesen Vergleich unterstrichen wird, ist, dass wir die vorhandenen Assets nicht als selbstverständlich ansehen können. So sehr wir die Tatsache genießen mögen, dass Maschinen bereit sind, Entscheidungen in unserem Namen zu treffen, ein Front-End-Workflow ist immer noch überwiegend eine subjektive Aufgabe und beeinflusst, wie wir unsere Arbeit machen.