Was ist SVG? Warum es PDF so ähnlich ist und wo sie sich unterscheiden
7 Min. Lesezeit
Die Umwandlung von PDF nach SVG gehört zu den "unmittelbarsten" Formatumwandlungen überhaupt – denn die beiden Formate gehören eigentlich derselben Familie an. In diesem Beitrag untersuchen wir ihre gemeinsamen Wurzeln, wo sie sich exakt decken und wo sie auseinandergehen.
Der gemeinsame Vorfahr: das PostScript-Darstellungsmodell
Beide Formate verwenden ein Darstellungsmodell, das von der in den 1980er-Jahren von Adobe entwickelten Seitenbeschreibungssprache PostScript abstammt. Die Grundgedanken dieses Modells sind:
Der Begriff des Pfades (Path). Formen bestehen aus Pfaden, die durch gerade Segmente und Bézierkurven definiert sind. Ein Pfad kann offen oder geschlossen sein; er lässt sich füllen, mit einer Kontur versehen oder als Beschneidungsfläche nutzen.
Das Malermodell (Painter's Model). Zeichnungen werden der Reihe nach ausgeführt, und Späteres legt sich über Früheres. Wie das Auftragen von Farbe auf eine Leinwand.
Der Grafikzustand (Graphics State). Einstellungen wie Farbe, Linienstärke und Transformationsmatrix werden in einem Zustandsstapel geführt und lassen sich speichern und wiederherstellen.
Transformationsmatrizen. Skalierung, Verschiebung, Drehung und Scherung werden durch affine Transformationsmatrizen mit sechs Elementen ausgedrückt.
Dank dieser Gemeinsamkeit finden die meisten Zeichenbefehle von PDF in SVG eine unmittelbare Entsprechung:
| PDF-Befehl | Entsprechung in SVG |
|---|---|
| m (moveto) | M (Pfaddaten) |
| l (lineto) | L |
| c (curveto) | C (kubische Bézierkurve) |
| re (rectangle) | <rect> oder Pfad |
| f (fill) | Attribut fill |
| S (stroke) | Attribut stroke |
| W n (clip) | <clipPath> |
| cm (Transformation) | Attribut transform |
| q/Q (Zustand speichern/laden) | Gruppierung mit <g> |
Die Aufgabe des Konverters besteht im Wesentlichen darin, diese Zuordnung vorzunehmen. Deshalb ist die Umwandlung von PDF nach SVG weit verlässlicher als etwa die von PDF nach Word; bei Letzterer sind Formatschätzungen nötig, hier gibt es meist eine unmittelbare Übersetzung.
Erster Unterschied: das Koordinatensystem
PDF stammt aus der Drucktradition. Der Ursprung liegt in der linken unteren Ecke der Seite, und die y-Achse wächst nach oben. Das entspricht dem kartesischen System des Mathematikunterrichts und ist naheliegend, wenn man in Papiermaßen denkt.
SVG stammt aus der Bildschirmtradition. Der Ursprung liegt in der linken oberen Ecke, und y wächst nach unten. Das ist der Standardansatz der Computergrafik.
Konverter lösen das mit einer Transformationsmatrix: Sie spiegeln den gesamten Inhalt an der y-Achse und verschieben ihn um die Seitenhöhe. Als Nutzer bemerken Sie das nicht, doch wenn Sie die SVG-Datei als Text öffnen, können Sie im Wurzelelement eine Transformation wie diese sehen:
transform="matrix(1,0,0,-1,0,842)"
Das bedeutet: "Spiegle die y-Achse und verschiebe um 842 Einheiten nach unten" – 842 ist die Höhe einer A4-Seite in Punkt.
Zweiter Unterschied: die Einheiten
PDF verwendet die Einheit Punkt: 1 Punkt = 1/72 Zoll. Eine A4-Seite misst 595 × 842 Punkt. Diese Einheit ist in der Druckwelt Standard.
SVG definiert Benutzereinheiten über das Attribut viewBox und ist an kein physisches Maß gebunden. Über die Attribute width und height lassen sich Einheiten wie Pixel, Millimeter oder Zoll angeben, doch das ist nicht zwingend.
Bei der Umwandlung werden die Punktwerte des PDFs meist unmittelbar als SVG-Benutzereinheiten übernommen. Das Ergebnis ist, dass die Seitenverhältnisse erhalten bleiben, die Angabe der physischen Größe aber unklar werden kann. Bereiten Sie ein SVG für den Druck auf, müssen Sie die Werte von width und height ausdrücklich in Millimetern angeben.
Dritter Unterschied: die Schriften
Das ist der wichtigste praktische Unterschied zwischen beiden Formaten.
PDF bettet Schriften ein. Ein PDF kann die Zeichendaten der verwendeten Schriften in sich tragen (und tut es meist). Das garantiert, dass die Datei überall exakt gleich aussieht – genau darin liegt der Daseinsgrund des Formats.
SVG bettet meist nicht ein. Eine übliche SVG-Datei schreibt font-family="Arial" und erwartet, dass diese Schrift auf dem System des Betrachters vorhanden ist. Fehlt sie, greift der Browser auf eine ähnliche Schrift zurück.
Die Folge: Übertragen Sie Text aus einem PDF als Text in ein SVG, besteht die Möglichkeit, dass die Originalschrift beim Betrachter fehlt. Die Zeichenbreiten ändern sich, Zeilen laufen über oder werden kürzer, die Ausrichtung zerfällt. Besonders bei Dokumenten mit unternehmenseigenen oder kommerziellen Schriften ist das nahezu sicher.
Es gibt drei Lösungen:
1. Den Text in Pfade umwandeln. Jeder Buchstabe wird zu einem <path>. Das Aussehen ist garantiert, doch der Text ist kein Text mehr – er lässt sich nicht markieren, nicht durchsuchen, ein Screenreader kann ihn nicht lesen, und die Datei wird deutlich größer.
2. Die Schrift einbetten. Über CSS @font-face können Sie base64-kodierte Schriftdaten in das SVG legen. Aussehen und Zugänglichkeit bleiben erhalten, doch die Datei wächst, und die Schriftlizenz erlaubt es womöglich nicht.
3. Auf eine websichere Schrift zurückgreifen. Wird eine verbreitete Schrift verwendet (Arial, Times New Roman), ist das Risiko gering.
In der Praxis wählt man bei Logos und Grafiken Pfade, bei textlastigen Inhalten Einbettung oder Text.
Vierter Unterschied: der Farbraum
PDF unterstützt CMYK von Haus aus. Weil es für den Druck entworfen wurde, lassen sich Farben über die Komponenten Cyan, Magenta, Gelb und Schwarz definieren. Zudem können Schmuckfarben (eigene Druckfarben wie Pantone) und ICC-Farbprofile definiert werden.
SVG ist RGB-basiert. Ein Konzept CMYK gibt es nicht. Sie schreiben fill="#RRGGBB" oder fill="rgb(r,g,b)".
Bei der Umwandlung werden CMYK-Werte nach RGB gewandelt, und das ist eine verlustbehaftete Umwandlung. Die Gamuts der beiden Farbräume (der Bereich der darstellbaren Farben) unterscheiden sich; für manche CMYK-Farben gibt es keine exakte RGB-Entsprechung. Am deutlichsten zeigen sich die Unterschiede bei dunklem Rot, Marineblau, Orange und satten Schwarztönen.
Müssen Unternehmensfarben exakt stimmen, müssen Sie die Farbwerte im SVG nach der Umwandlung von Hand anhand der RGB-Werte Ihres Markenhandbuchs korrigieren.
Fünfter Unterschied: Transparenz und Effekte
Das Transparenzmodell von PDF ist recht weit entwickelt: Alphatransparenz, Mischmodi (Multiplizieren, Negativ multiplizieren, Überlagern …), weiche Masken (Soft Masks) und Transparenzgruppen.
Auch SVG unterstützt Transparenz (opacity, fill-opacity, <mask>, <filter>), doch die Modelle decken sich nicht exakt. Manche PDF-Mischmodi haben keine unmittelbare Entsprechung in SVG, und manche Soft-Mask-Strukturen werden anders verarbeitet.
Die Folge: Bei Gestaltungsdateien mit fortgeschrittenen Transparenzeffekten kann es nach der Umwandlung optische Unterschiede geben. Bei einfacher Alphatransparenz treten keine Probleme auf.
Sechster Unterschied: Struktur und Zweck
PDF ist mehrseitig und ein Dokumentformat. Seitenbaum, Lesezeichen, Formularfelder, Anmerkungen, Metadaten, digitale Signatur – all das gehört zum Begriff des Dokuments.
SVG ist "einseitig" und ein Grafikformat. Ein Konzept mehrerer Seiten gibt es nicht. Dokumenteigenschaften wie Lesezeichen, Formularfelder und Anmerkungen existieren nicht.
Bei der Umwandlung geht all das verloren:
| PDF-Eigenschaft | In SVG |
|---|---|
| Seitenstruktur | Jede Seite eine eigene Datei |
| Lesezeichen | Gehen verloren |
| Formularfelder | Das Aussehen bleibt, die Funktion geht |
| Anmerkungen | Gehen meist verloren |
| Hyperlinks | Manche Konverter übernehmen sie als <a> |
| Metadaten | Gehen verloren |
| Ebenen (OCG) | Werden meist auf eine Ebene reduziert |
| Digitale Signatur | Geht verloren |
Dafür besitzt SVG Fähigkeiten, die PDF nicht hat: Gestaltung per CSS, Interaktion per JavaScript, Animation über SMIL oder CSS und programmatischen Zugriff über das DOM.
Warum Druckereien kein SVG wollen
Wegen dreier Lücken:
Kein CMYK. Die Druckmaschine arbeitet mit CMYK; eine RGB-Datei erzeugt Unsicherheit im Farbmanagement.
Kein Anschnitt und keine Schnittmarken. In PDF gibt es die Boxen BleedBox und TrimBox; in SVG ist ein solches Konzept nicht definiert.
Keine Farbprofilverwaltung. ICC-Profile lassen sich nicht einbetten.
Deshalb verlangen Druckereien PDF, insbesondere die PDF/X-Unterprofile. SVG wurde für Web und Bildschirm entworfen, PDF für Druck und Dokumentenaustausch.
Zusammengefasst
PDF und SVG sind zwei Vektorformate, die demselben PostScript-Darstellungsmodell entstammen, und ihre Zeichenbefehle entsprechen einander weitgehend eins zu eins – das erklärt, warum die Umwandlung so verlässlich ist. Die Punkte, an denen sie auseinandergehen, haben jedoch praktische Folgen: Die Koordinatensysteme sind umgekehrt (der Konverter gleicht das aus), PDF bettet Schriften ein und SVG meist nicht (daher rührt die Entscheidung zwischen Text und Pfad), PDF unterstützt CMYK und SVG ist RGB-basiert (Farbverschiebung), und PDF ist ein Dokumentformat, während SVG ein einseitiges Grafikformat ist (Lesezeichen, Formulare und die mehrseitige Struktur gehen verloren). Die richtige Formatwahl hängt davon ab, wohin die Ausgabe geht: SVG für Web und Gestaltung, PDF für Druck und Dokumentenaustausch.
Häufig gestellte Fragen
Verwenden PDF und SVG dasselbe Zeichenmodell?
Weitgehend ja. Beide beruhen auf einem Darstellungsmodell, das von PostScript abstammt: Pfade werden durch Geraden und Bézierkurven definiert, Füllung und Kontur sind getrennte Vorgänge, und Beschneidungspfade begrenzen die Fläche. Diese Gemeinsamkeit erklärt, warum sich PDF so unmittelbar nach SVG umwandeln lässt – die meisten Befehle finden eine Eins-zu-eins-Entsprechung.
Warum sind die Koordinatensysteme der beiden Formate umgekehrt?
PDF stammt aus der Drucktradition und setzt den Ursprung in die linke untere Ecke der Seite, wobei die y-Achse nach oben wächst – wie im kartesischen System des Mathematikunterrichts. SVG stammt aus der Bildschirmtradition und setzt den Ursprung in die linke obere Ecke, wobei y nach unten wächst. Konverter gleichen diesen Unterschied mit einer Transformationsmatrix aus, sodass Sie als Nutzer nichts davon bemerken.
Lassen sich in SVG eingebettete Schriften verwenden?
Ja, auf zwei Wegen: über eine CSS-Regel @font-face auf eine externe Schriftdatei zu verweisen oder die Schrift als base64 in das SVG einzubetten. Letzteres macht die Datei vollständig eigenständig, erhöht ihre Größe aber erheblich – eine Schriftfamilie kann einige Hundert Kilobyte umfassen. Zudem erlauben Schriftlizenzen das Einbetten nicht immer.
Warum wird SVG für Druckereiaufträge nicht bevorzugt?
Aus drei Gründen: SVG arbeitet von Natur aus im RGB-Farbraum und unterstützt kein CMYK, Konzepte der Druckvorstufe wie Anschnitt (Bleed) und Schnittmarken sind nicht definiert, und es gibt keine Verwaltung von Farbprofilen (ICC). Druckereien benötigen alle drei. PDF, insbesondere die PDF/X-Unterprofile, wurde für diese Anforderungen entworfen.
Probieren Sie es gleich mit PDF → SVG aus.
PDF → SVG ausprobieren