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.SVG | PNG | JPG | |
---|---|---|---|
![]() | ![]() | ||
Dateigröße | 9 kb | 108 kb | 29 kb |
Breite | Frei Skalierbar | 500 px | 500 px |
Kompression | Inkscape - Optimiertes SVG | 9 + PngOptimizer | 30 / Baseline / ohne Chroma-Subsampling |
Transparenz |
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.
PDF-Dateien
Auch die Größe von PDF-Dateien kann mit Vektorgrafiken deutlich verringert werden.

SVG | PNG | JPG | |
---|---|---|---|
Größe der PDF Datei | 386 kB | 764 kB | 735 kB |
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.Einsatz
- 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!
Der positive Ersteindruck den eine saubere Grafik hinterlässt, ist durch Nichts zu ersetzen!
Software
- Inkscape
- PngOptimizer
- SVGOMG Online-Tool zum Optimieren von SVG-Dateien
Weiterführende Informationen
Downloads
Dokumentenoptimierung - Vektorgrafik | |||
Download | |||
04.12.2020 2.34 MB | 213 |
Dokumentenoptimierung Beispielvorlage 2.1 | |||
Ein PDF-Beispiel mit verschiedenen Vektorgrafiken, Schriftarten, Tabellen und simulierter Bleistift / Kugelschreiber Handschrift. | Download | ||
07.02.2023 461.89 KB | 624 |