So wandeln Sie PDF in SVG um
Online (diese Seite)
Laden Sie das PDF im Konverter oben hoch (bis zu 100 MB) und laden Sie das SVG herunter. Das PDF wird mit LibreOffice importiert und als einzelne SVG-Datei exportiert.
Inkscape (kostenlos)
- Wählen Sie Datei → Öffnen und wählen Sie das PDF aus.
- Wählen Sie im Dialog für den PDF-Import die Seite und die Importmethode (Poppler/Cairo oder intern).
- Speichern Sie mit Datei → Speichern unter → Normales SVG.
Adobe Illustrator
Öffnen Sie das PDF (Illustrator fragt nach der Seite), bearbeiten Sie es bei Bedarf und wählen Sie dann Datei → Exportieren → Exportieren als mit dem Format SVG.
Kommandozeile
pdftocairo -svg -f 1 -l 1 input.pdf page1.svg (poppler) wandelt eine Seite um; pdf2svg input.pdf page-%d.svg all schreibt jede Seite in eine eigene Datei.
Vektorinhalt vs. Rasterinhalt in PDFs
PDFs können sowohl Vektor- als auch Rasterinhalte enthalten, oft auf derselben Seite. Die Art des Inhalts in Ihrem PDF bestimmt, was Sie von der SVG-Konvertierung erwarten können:
| Inhaltstyp | Beispiele | Im SVG-Ergebnis |
|---|---|---|
| Vektorpfade | Logos, Icons, Strichgrafiken, Diagramme | Bearbeitbare SVG-Pfade, beliebig skalierbar |
| Text | Überschriften, Fließtext, Beschriftungen | Textelemente oder Pfadkonturen |
| Rasterbilder | Fotos, gescannte Inhalte | Eingebettet als base64-Bilddaten |
| Verläufe | Farbübergänge, Schattierungen | SVG-Verlaufselemente |
| Beschneidungsmasken | Zugeschnittene Bilder, geformter Text | SVG-clipPath-Elemente |
Am besten geeignet für PDF zu SVG: PDFs aus Adobe Illustrator, InDesign, CorelDRAW oder anderer Vektor-Designsoftware. Sie enthalten echte Vektorpfade, die sich hervorragend in SVG umwandeln lassen. Gescannte Dokumente liefern schlechte SVG-Ergebnisse, da der Inhalt bereits gerastert ist. Für Scans und Fotos lesen Sie stattdessen, wie Sie ein Bild vektorisieren, indem Sie es nachzeichnen.
Textbehandlung: Pfade vs. Textelemente
Text im SVG-Ergebnis kann auf zwei Arten dargestellt werden:
Text als Pfadkonturen
Jedes Zeichen wird in Vektorpfaddaten umgewandelt (die eigentlichen Buchstabenformen). Dies stellt sicher, dass der Text unabhängig von installierten Schriftarten exakt wie das Original aussieht. Der Nachteil: Der Text ist nicht mehr durchsuchbar oder als Text auswählbar — er ist rein visuell.
Text als SVG-Textelemente
Zeichen werden als <text>-Elemente im SVG ausgegeben. Der Text bleibt durchsuchbar, auswählbar und bearbeitbar. Das Erscheinungsbild hängt jedoch davon ab, ob die richtige Schriftart installiert ist. Fehlt die Schriftart, ersetzt der Browser oder Editor sie durch eine andere, was das Layout verändern kann.
Wann welcher Ansatz sinnvoll ist:
- Pfadkonturen: Wenn die visuelle Treue oberste Priorität hat (Logos, Branding, finale Grafiken). Die Ausgabe sieht überall identisch aus.
- Textelemente: Wenn Sie den Textinhalt bearbeiten, für SEO nutzen (Web-Einbettung) oder Barrierefreiheit gewährleisten müssen (Screenreader). Wenn Sie nur die Wörter und nicht die Grafiken brauchen, lesen Sie, wie Sie Text aus einem PDF extrahieren.
Struktur der SVG-Ausgabe
Die resultierende SVG-Datei ist ein Standard-XML-Dokument, das in jeder SVG-kompatiblen Anwendung geöffnet werden kann. Die Struktur umfasst typischerweise:
- Wurzel-
<svg>-Element: Definiert die Viewport-Abmessungen entsprechend der ursprünglichen PDF-Seitengröße <defs>-Abschnitt: Enthält wiederverwendbare Definitionen wie Verläufe, Muster und Beschneidungspfade<g>-Gruppen: Elemente, die in logische Gruppen unterteilt sind, oft entsprechend den Ebenen im ursprünglichen PDF<path>-Elemente: Die eigentlichen Vektorformen, definiert durch SVG-Pfaddaten (M-, L-, C-, Z-Befehle)<image>-Elemente: Eingebettete Rasterbilder (base64-kodiert oder externe Verweise)
Bearbeitung der SVG-Ausgabe
SVG-Dateien können mit einer Vielzahl von Werkzeugen bearbeitet werden:
- Adobe Illustrator: Professionelle Vektorbearbeitung in vollem Umfang. Öffnen Sie SVG direkt, bearbeiten Sie Pfade, ändern Sie Farben, fügen Sie Elemente hinzu oder entfernen Sie sie. Ideal für komplexe Grafikarbeiten.
- Inkscape: Kostenloser Open-Source-Vektoreditor. Hervorragende SVG-Unterstützung, da SVG sein natives Format ist. Sehr gut für die Logo-Extraktion und Diagrammbearbeitung geeignet.
- Figma: SVG für UI/UX-Designarbeiten importieren. Nützlich zum Extrahieren von Icons und Designelementen aus PDF-Styleguides.
- Code-Editoren: Da SVG XML ist, können Sie es direkt in VS Code, Sublime Text oder einem beliebigen Texteditor bearbeiten. Nützlich zum Entfernen unnötiger Elemente, zur Dateigrößenoptimierung und für die Web-Einbettung.
Optimierungstipps
Konvertierte SVG-Dateien enthalten oft unnötige Daten, die die Dateigröße erhöhen, ohne die Qualität zu verbessern. Hier sind gängige Optimierungsschritte:
- Metadaten entfernen: PDF-Konvertierungswerkzeuge können Metadaten, Kommentare und Verarbeitungsanweisungen einbetten. Entfernen Sie diese, um die Dateigröße zu reduzieren.
- Pfade vereinfachen: Komplexe Kurven mit vielen Kontrollpunkten können mit Werkzeugen wie SVGO oder dem Befehl „Pfad vereinfachen" in Illustrator vereinfacht werden. Dies reduziert die Dateigröße bei minimalem visuellem Einfluss.
- Ausgeblendete Elemente entfernen: Einige Konvertierungen erzeugen ausgeblendete oder außerhalb der Leinwand liegende Elemente. Löschen Sie alles, was sich außerhalb der viewBox befindet.
- Überlappende Formen zusammenführen: Separate Formen, die ein einzelnes visuelles Element bilden, können mithilfe von booleschen Operationen zusammengeführt werden (Vereinigung in Inkscape, Pathfinder in Illustrator).
- Für das Web optimieren: Verwenden Sie SVGO oder ähnliche Werkzeuge, um das SVG zu minimieren (Leerzeichen entfernen, Pfaddaten kürzen, Transformationen optimieren) für die Web-Einbettung.
Typische Anwendungsfälle
Logo-Extraktion: Extrahieren Sie Firmenlogos aus PDF-Markenrichtlinien oder Briefköpfen. Das Vektorformat sorgt dafür, dass das Logo auf jede Größe perfekt skaliert.
Diagrammbearbeitung: Wandeln Sie technische Diagramme, Flussdiagramme und Schaltpläne aus PDF-Dokumentationen in SVG um, um sie zu ändern und wiederzuverwenden.
Webgrafiken: Wandeln Sie PDF-Illustrationen für die Einbettung ins Web in SVG um. SVG wird auf allen Bildschirmdichten (Retina, 4K) gestochen scharf dargestellt, ohne mehrere Bildgrößen erstellen zu müssen. Unser Vergleich von SVG und PNG erklärt, wann eine Vektordatei für das Web die bessere Wahl ist.
Druckvorbereitung: Extrahieren Sie Vektorgrafiken aus PDFs für neue Druckprojekte und sichern Sie so maximale Qualität in jeder Druckgröße.