Dokumentenoptimierung - Vektorgrafik

Seit einigen Jahrzehnten gibt es Vektorgrafiken

Trotz aller Vorteile werden diese viel zu wenig angewandt.

Bei nicht zu komplexen Bildern spricht vieles für deren Einsatz:

• Frei skalierbar und rotierbar. Die Grafik wird immer optimal dargestellt.
• Durch die freie Skalierbarkeit braucht die Datei nicht in verschiedenen Auflösungen gespeichert zu werden.
• Professionelles Erscheinungsbild
• Geringe Dateigröße

Vergleich zwischen verschiedenen Grafikformaten

Als Vektor-Format hab ich hier SVG verwendet, da dies von Webbrowsern direkt darstellbar ist.

Größenvergleich: Aus der SVG-Datei wurden die anderen Formate erstellt

	SVG	PNG	JPG
Dateigröße	10 kB	111 kB	29 kB
Breite	Frei Skalierbar	500 px	500 px
Kompression	Inkscape - Optimiertes SVG	9 + PngOptimizer	30 / Baseline / ohne Chroma-Subsampling
Transparenz

Wer die Grafiken hier vergrößert (mit der Maus auf dem Bild bleiben), wird bei der SVG-Grafik keinen Qualitätsverlust erkennen können.
Bei der PNG-Datei ist dies nicht gleich erkennbar. Hier wird vor allem die Schrift undeutlich und die Dateigröße übertrifft die der SVG-Datei um ein Vielfaches.
Die Komprimierungsartefakte der JPG-Datei sind hingegen sofort erkennbar. Auch wird dadurch deutlich, dass diese gerade für Schriften, oder andere feine Linien, ein sehr unschönes Bild ergibt. Zudem unterstützt es keine Transparenz.

Die nachfolgenden Grafiken verdeutlichen dies nochmal.

Vergrößerter Ausschnitt

SVG

PNG

JPEG

SVG-Grafiken in Web-Seiten

In Web-Seiten können Sie SVG-Grafiken wie normale Grafiken einbinden.

<img src="/images/Dokumentenoptimierung/Thorsten_H_Willert_-_Dokumentenoptimierung__Logo_SVG.svg" alt="Logo_SVG"/>

Lassen Sie sich nicht täuschen:
Auch wenn eine SVG-Datei evtl. größer als eine gleichwertige Rastergrafik sein sollte:
Ist die gzip-Kompression auf dem Web-Server / im CMS aktiviert, werden evtl. dennoch weniger Daten übertragen.

Die Übertragung der vorgehenden Beispiele, aufgezeichnet mit der Netzwerkanalyse von FireFox:


Wenn Sie die Spalten Übertragung und Größe vergleichen, können Sie sehen, dass durch die aktivierte Kompression, bei SVG, viel weniger Daten übertragen werden, als die Dateigröße vermuten läßt.

Das hat folgenden technischen Hintergrund:
SVG-Grafiken sind reine Text-Dateien die sehr gut komprimiert werden könnnen.
Die schon komprimierten PNG und JPEG-Dateien können hier nicht mehr verkleinert werden.

Extrem kleine Darstellung

Bayerische Flagge mit Wappen

SVG	PNG
55 kB	0.43 kB
55 kB	1.06 kB
55 kB	2.57 kB
55 kB	7.19 kB
SVG-Bild von Wikimedia Commons (Public Domain), optimiert mit SVGOMG	PNG-Bild optimiert mit pingo und pngquant.

Im Gegensatz zu einfachen Motiven.

Deutsche Flagge

SVG	PNG	WebP
0.16 kB	0.13 kB	0.25 kB
SVG-Bild von Wikimedia Commons (Public Domain), optimiert mit SVGOMG	PNG-Bild optimiert mit pingo und pngquant.	GIMP Typ: Default | 30 %.

PDF-Dateien

Auch die Größe von PDF-Dateien kann mit Vektorgrafiken deutlich verringert werden.

Eine PDF-Datei mit gezeigtem Inhalt ergibt folgende Größe (unkomprimierte Grafiken). Das kleine Logo hat jeweils 150 dpi das große 300 dpi.

	SVG	PNG	JPG
Größe der PDF Datei	386 kB	764 kB	735 kB

Wie sie sehen lässt sich hier, schon bei kleinen Dokumenten, Speicherplatz sparen.

Vektorgrafiken erstellen

Wer seine Grafiken oder Logos erstellen lässt, kann diese in den passenden Formaten bestellen.

Zum kostengünstigen Selbermachen empfehle ich das Freeware Programm Inkscape.



Wie bei den meisten Vektor-Zeichenprogrammen bietet sich auch hier die Möglichkeit eine bestehende Grafik zu vektorisieren, was aber nur für sehr einfache Aufgaben ratsam ist.
Man kann auch sein bestehendes Logo in das Programm laden und dort „nachzeichnen“, dies ergibt dann das beste Ergebnis.
Schriften (und wenn es nur wenige Buchstaben sind) sollten immer als Text eingefügt werden.
Eine Umwandlung der Schrift in „Grafik“ (Pfade) sollte erst erfolgen, wenn keine Änderung mehr stattfindet; hierfür am besten eine Kopie der Datei anlegen. Bei nur wenigen Buchstaben kann man damit die Dateigröße um einiges reduzieren. Auch beim Export in Formate wie WMF, EMF usw. kann es von Vorteil sein, da sonst evtl. Darstellungsfehler entstehen.
Ist die Grafik fertig, sollte man bei Inkscape diese zusätzlich als „Optimiertes SVG“ speichern, damit kann die Dateigröße extrem reduziert werden.

SVG-Vektorgrafiken komprimieren und optimieren

Optimieren

Beim Optimieren von SVG-Dateien wird meist auch die Dateigröße optimiert. Das geschieht z. B. indem:

• überflüssige Attribute entfernt werden.
• Farbnamen in numerische Werte verkürzt werden.
• unbenutzte IDs entfernt werden.
• usw.

Dabei wird die ursprüngliche SVG-Datei verändert!

Dies ist zum Beispiel mit dem Online-Tool SVGOMG machbar.

Komprimieren

Beim reinen Komprimieren wird die Datei-Größe durch bestimmte Verfahren verkleinert, die den Inhalt nicht beinflussen.

Dabei bleibt die ursprüngliche SVG-Datei unverändert.

Nach dem Dekomprimieren ist die Datei identisch mit dem Original.

Dies geschieht indem man z. B. das Bild als SVGZ-Datei speichert oder mit Kompressionsprogrammen wie ZIP oder 7z komprimiert.

Vektorgrafiken am besten überall verwenden!

Vor allem für Firmenlogos sollten Vektorgrafiken mit dem entsprechenden Corporate Design, genutzt werden.

• Geschäftsbriefe
• Briefpapier
• alle Arten von (Kunden) Formularen
• Visitenkarten
• Präsentationen - hier bitte Niemanden mit JPEG-Artefakten (Klötzchen) erschrecken
• Kataloge - als PDF-Katalog besonders peinlich, wenn beim Vergrößern, anstatt die Details deutlicher, nur die Pixel größer werden
• Flyer
• Webseiten - Vektorgrafik ist immer responsiv!

• NEIN – nicht in E-Mails!
  Alles, was von reinem Text abweicht, hat sich als Sicherheitsrisiko herausgestellt.
  HTML in E-Mails zeugt von geringem Sicherheitsbewusstsein und ist dementsprechend unprofessionell – also lassen sie es! Wenn ihre Firma es trotzdem möchte, weisen sie sie auf die Problematik hin.
  Bunte Werbung bitte nur als Anhang!

Auch bei Dateigrößen (Speicherplatz) und Übertragungsraten (Bandbreite) ist die Verwendung von Vektorgrafiken im guten Sinne bemerkbar.

Mehr zum Thema

Software

• Inkscape
• PngOptimizer
• SVGOMG Online-Tool zum Optimieren von SVG-Dateien

Weiterführende Informationen

• Inkscape kennenlernen
• Vektorgrafik
• Vektorfont
• SVG
• WMF
• EMF
• PDF

Downloads

---