Inkscape erzeugt zwar W3C-konforme SVG-Dateien, für den Einsatz im Web geraten diese allerdings meist größer als nötig. Dem lässt sich abhelfen.

Gerade bei der Arbeit an vektororientierten Webgrafiken sollten Sie darauf achten, diese sauber und optimiert zu erstellen, damit Sie am Ende des Tages mit möglichst wenig Code auskommen. Allerdings behalten die wenigsten Grafiker diese Prämisse im Hinterkopf – sie zeichnen einfach so, dass das Resultat gut aussieht.

Aus groß mach klein

Nehmen wir als Beispiel einen einfachen Kreis. Es gibt zwei Möglichkeiten, ihn darzustellen: entweder als Pfad (Listing 1) oder als SVG-Element (Listing 2).

<path d="M 162.66582,125.05696 A 70.917999,70.917778 0 0 1 91.747818,195.97474 70.917999,70.917778 0 0 1 20.829819,125.05696 70.917999,70.917778 0 0 1 91.747818,54.139183 70.917999,70.917778 0 0 1 162.66582,125.05696 Z" style="fill:#000000;stroke:none;stroke-width:7.99999;stroke-linecap:round;stroke-linejoin:round;stop-color:#000000" id="path10" />

<ellipse ry="70.917778" rx="70.917999" cy="125.05696" cx="91.747818" id="path10" style="fill:#000000;stroke:none;stroke-width:7.99999;stroke-linecap:round;stroke-linejoin:round;stop-color:#000000" />

Als Pfad genügen bereits zwei Knoten; die meisten Programme verwenden allerdings mindestens vier, so auch Inkscape. Das liegt daran, dass mit nur zwei Knoten leichte Abweichungen vom Originalpfad entstehen.

Wie man sieht, benötigt der Quellcode aus Listing 1 deutlich mehr Zeichen und entsprechend auch mehr Platz. So lange Sie also mit in SVG-definierten Elementen (Listing 2) arbeiten können, sollten Sie das auch tun.

Klon oder Duplikat?

Häufig verwenden Grafiker ein Duplikat eines Objekts anstelle eines Klons. Ersteres wiederholt die komplette Beschreibung des Objekts, nur die Koordinaten und ID ändern sich (Listing 3). Bei einem Klon hingegen kommt der Use-Tag mit der ID des Originals zum Einsatz (Listing 4).

  <ellipse
    ry="8.595953"
    rx="8.5959797"
    cy="62.735138"
    cx="29.425798"
    id="path10"
    style="fill:#000000;stroke:none;stroke-width:0.96968;stroke-linecap:round;stroke-linejoin:round;stop-color:#000000" />
  <ellipse
    style="fill:#000000;stroke:none;stroke-width:0.96968;stroke-linecap:round;stroke-linejoin:round;stop-color:#000000"
    id="ellipse102"
    cx="49.26012"
    cy="62.735138"
    rx="8.5959797"
    ry="8.595953" />

<ellipse
    ry="8.595953"
    rx="8.5959797"
    cy="62.735138"
    cx="29.425798"
    id="path10"
    style="fill:#000000;stroke:none;stroke-width:0.96968;stroke-linecap:round;stroke-linejoin:round;stop-color:#000000" />
  <use
    height="100%"
    width="100%"
    transform="translate(21.089236)"
    id="use104"
    xlink:href="#path10"
    y="0"
    x="0" />

Während das Codebeispiel aus Listing 3 488 Zeichen benötigt, kommt die geklonte Variante aus Listing 4 mit lediglich 406 Zeichen aus – bei gleichem Ergebnis. Das erscheint zwar relativ wenig, aber es handelt sich hier nur im ein einzelnes Objekt. Bei komplexeren Grafiken kommen so schnell diverse Kilobytes zusammen.

Der ein oder andere mag meinen, ein paar KByte spielten heute keine Rolle; das stimmt aber nur zum Teil. Viele Anwender surfen heute per Smartphone, wo der Traffic nach wie vor verhältnismäßig teuer ist. Darüber hinaus bezahlen Sie als Webmaster häufig ebenfalls für den Datenverkehr. Da machen 100 KByte am Monatsende dann womöglich das ein oder andere GByte mehr aus. Als Zusatznutzen profitieren Ihre Besucher von einer kompakten Webseite mit kürzeren Ladezeiten.

Auf jeden Fall sollten Sie nicht benötigte Knoten an Pfaden entfernen, was aber nur in Handarbeit gelingt. Ein idealer Pfad sieht am Ende so aus wie in Listing 5 gezeigt.

<path d="M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM212 140v116h-70.9c-10.7 0-16.1 13-8.5 20.5l114.9 114.3c4.7 4.7 12.2 4.7 16.9 0l114.9-114.3c7.6-7.6 2.2-20.5-8.5-20.5H300V140c0-6.6-5.4-12-12-12h-64c-6.6 0-12 5.4-12 12z"/>

Inkscape

Die Mehrheit der Linux-Nutzer dürfte SVG-Grafiken mit Inkscape erstellen. Was aber viele vergessen: Die Software bläht diese mit viel Unnötigem auf. Das fängt bei unbenutzten Definitionen an und setzt sich über die Inkscape- und Sodipodi-DTD bis hin zu reichlich Metainformationen fort. All das benötigt der Webbrowser zum Rendern der Grafiken nicht.

Unbenutzte Definitionen entstehen zum Beispiel, wenn Sie ein Objekt mit einem Farbverlauf füllen. Der steht in der Definition <defs> am Anfang des Dokuments, um ihn wiederverwenden zu können. Ändern Sie die Füllung, bleibt diese Definition aber erhalten. Solche unbenutzten Definitionen entfernen Sie in Inkscape über Datei | Dokument säubern.

Richtig speichern

Wie entfernt man aber alle anderen, nicht benötigten Elemente im Dokument? Wenn Sie anstelle von Datei | speichern Datei | speichern unter… verwenden (Abbildung 1), lässt sich ein anderes Dateiformat wählen. Dazu zählen auch verschiedene SVG-Varianten, wie Inkscape-SVG, normales SVG (und deren gezippte Varianten) sowie optimiertes SVG.

Bei Ersterem bleibt alles beim Alten. Das Speichern als normales SVG entfernt hingegen alle Inkscape/Sodipodi-eigenen Elemente. Verwenden Sie optimiertes SVG, öffnet sich ein Dialogfenster mit vier Reitern. Der letzte davon teilt mit, dass Inkscape hier den SVG-Optimierer Scour [1] verwendet.

Abbildung 1: Speichern Sie unter Inkscape Ihre Datei als optimiertes SVG ab, öffnet sich dieser Dialog.

Im ersten Reiter Optionen geben Sie die signifikanten Stellen für die Koordinaten an. Im Codebeispiel zum Kreis sieht man, dass die Koordinaten sechs Stellen nach dem Komma aufweisen; eine solche Genauigkeit benötigt die Darstellung aber meist gar nicht. Trägt man dort hingegen eine 6 ein, weist die Zahl 3 Stellen vor und 3 danach auf; bei 2 Stellen vor dem Komma der Koordinaten sind es 4 danach.

Aktivieren Sie die Option Farbwerte kürzen, kommt für alle Farbwerte die Kurzschreibweise zum Einsatz, also statt fill:#ff0000 fill:#f00. CSS-Attribute in XML-Attribute konvertieren schreibt Farbwerte anstatt des CSS-Attributs in das SVG-Dokument. Das sollte man nicht tun, wenn man zum Beispiel Icons entwirft, die besser über CSS ihre Farbwerte erhalten.

Der Schalter Gruppen zusammenklappen entfernt nicht benötigte Gruppierungen. Viele Grafiker gruppieren alles oder einzelne Elemente der Grafik, was den Arbeitsablauf erleichtert. Im Code repräsentiert das der g-Tag, etwa <g id="g1211"></g>. Dieses Beispiel enthält 18 Bytes, die für das korrekte Rendering aber keinerlei Rolle spielen. Inkscape selbst erstellt im Dokument immer eine Gruppe für die Ebenen, die aber nur während der Arbeit Sinn ergeben, nicht aber bei der Darstellung.

Die Option Erstelle Gruppen für gleiche Attribute erstellt Gruppen für Objekte mit gleicher Füllfarbe und Kontur. Die Werte für die Attribute schreibt die Software dann in den g-Tag, etwa <g fill="#f00">. Alle Objekte dieser Gruppe sind also schwarz, was je Objekt das entsprechende Attribut einspart – also im Minimum mit zwei Objekten 10 Zeichen.

Der Schalter Unreferenzierte Definitionen erhalten behält die bereits beschriebenen Definitionen bei. Rendererfehler umgehen versucht, bekannte Renderfehler einiger Engines zu umgehen. Allerdings rendern alle Webbrowser SVG recht gut, weswegen man diesen Schalter nicht dringend benötigt.

Auch der zweite Reiter SVG-Ausgabe (Abbildung 2) enthält einige Optionen. XML-Deklaration entfernen benötigt man nicht, um die Grafik zu rendern. Es sollte aber erhalten bleiben, wenn die Grafik Text mit Sonderzeichen enthält.

Abbildung 2: Der Optimieren-Dialog mit dem Reiter für die angepasste SVG-Ausgabe.

Die nächste Option Metadaten entfernen sollten Sie aktivieren – davon fallen nämlich zuweilen eine ganze Menge an, etwa Einträge zu Autor und Lizenz. Kommentare entfernen löscht im Dokument enthaltene Anmerkungen, Rasterbilder einbetten schreibt vorhandene Rastergrafiken als Base64-Code in das SVG-Dokument.

Interessant ist der Schalter Viewbox aktivieren; nicht selten sieht man fehlerhafte Dateien damit. Viewport bezeichnet die sichtbare Bildfläche. Der Viewport lässt sich mit einem Blick aus einem Fenster vergleichen, in dem die Aussicht vollständig oder nur teilweise erscheint.

Die Größe des Viewports legen die Attribute width und height fest. Als Dimension für die Viewbox dient oft die Größe des Dokuments, man muss also vorher die Seitengröße entsprechend anpassen. Öffnen Sie dafür den Dialog Datei | Dokumenteneinstellungen, und aktivieren Sie Ändern der Seitengröße auf Inhalt…. Dann klicken Sie auf Seitengröße auf Zeichnungs-/Auswahlgröße anpassen.

Unter dem Reiter IDs aus der Optimierten SVG-Ausgabe (Abbildung 3) lassen sich unbenutzte IDs entfernen oder einkürzen. In SVG bekommt jedes Objekt eine ID, die jedoch oft länger als nötig ausfällt. Man spart damit zwar meist nur ein oder zwei Bytes, aber durch die schiere Masse kommt doch einiges zusammen.

Abbildung 3: Der Reiter mit den ID-Funktionen im Optimieren-Dialog.

Speichern Sie jetzt die Datei als SVG, fällt sie erheblich kleiner aus. Um wie viel, hängt von der Komplexität der Grafik ab: Je komplexer, umso größer die Ersparnis, meist um die 50 bis 65 Prozent.

Alternativen

In den meisten Fällen müssen Sie aber einige Vektorgrafiken optimieren, was in Inkscape einigen Zeitaufwand kostet. Die Software lässt sich zwar auf der Kommandozeile aufrufen, allerdings beschränken sich ihre Fähigkeiten auf das Aufräumen von Definitionen.

Inkscape verwendet auf der Kommandozeile die Dateiendung, um festzustellen, als was es die Datei speichern soll. SVG steht an dieser Stelle lediglich für Inkscape-SVG. Besser eignet sich das in Inkscape integrierte Kommandozeilentool Scour; Listing 6 zeigt dessen Syntax.

$ scour Input.svg Output.svg --create-groups --no-renderer-workaround --remove-descriptive-elements --enable-comment-stripping --enable-viewboxing --no-line-breaks --strip-xml-space --enable-id-stripping --shorten-ids

Es gibt weitere Werkzeuge zum Bearbeiten und Optimieren von SVG-Dateien, beispielsweise Svgo [2]. Dieses Tool führen allerdings die wenigsten Distributionen in ihren Repositories. Um es dennoch zu installieren, nutzen Sie den Paketmanager von Node.js:

$ sudo npm install -g svgo

Svgo folgt einer anderen Philosophie als Scour, weswegen der Aufruf weniger komplex ausfällt:

$ svgo -i Input.svg

Das Kommando überschreibt die Datei Input.svg mit der optimierten Version. Möchten Sie diese in einer eigenen Datei speichern, verwenden Sie den Schalter -o Output.svg.

Es gibt aber auch einige Unterschiede zwischen Scour und Svgo. So führt Svgo einige Operationen durch, die Scour nicht bietet. Beispielsweise vergleicht das Tool Pfadwerte und wandelt Duplikate in Klone um. Diese Option aktivieren Sie mit dem Schalter --reusePaths.

Auch bringt Svgo eine Funktion für rekursive Operationen mit und lässt sich daher auch auf Verzeichnisse anwenden. Bei Scour müssten Sie dafür ein kleines Skript schreiben. Auf jeden Fall ist Svgo im Vergleich zu Scour das modernere Werkzeug. Für Inkscape gibt es zwar ein Svgo-Plugin [3], das aber gegenwärtig noch nicht funktioniert.

Als weiteres Werkzeug zum Bereinigen von SVG-Dateien bietet sich Svgcleaner [4] an, für das es mit Svgcleaner-gui [5] auch eine grafische Benutzeroberfläche gibt. Auch dieses Werkzeug findet sich nur selten in den Repositories der Distributionen. Da die GUI in Qt geschrieben wurde, müssen Sie sie selbst kompilieren.

Das Werkzeug selbst realisierten die Entwickler mit Rust. Es lässt sich daher mit Cargo via cargo install svgcleaner installieren. Svgcleaner arbeitet noch radikaler als Svgo und erzeugt noch kleinere Dateien. Arbeiten Sie mit CSS innerhalb des SVG, meiden Sie das Programm besser, da es auch die CSS-Attribute entfernt.

Da Rust die Binärdatei in ein eigenes Unterverzeichnis ihres Heimatordners schreibt, wechseln Sie zunächst dorthin und rufen Svgcleaner von dieser Stelle aus auf (Listing 7).

$  cd /home/User/.cargo/bin/
$ ./svgcleaner Input.svg Output.svg

Fazit

Mit den vorgestellten Programmen und dem nötigen Hintergrundwissen fällt es auch SVG-Einsteigern leicht, vektorbasierte Webgrafiken zu optimieren. Damit macht man sich selbst eine Freude, wenn man Cloud-Services zum Hosting nutzt, aber auch den Besuchern der Seiten, die von den geringeren Ladezeiten profitieren. Allerdings gilt es, zu beachten, dass alle vorgestellten Werkzeuge bisher keine Eigenschaften von SVG 2.0 kennen und verändern. (tle)