jsPDF SVG: Logopfade im Browser-PDF erhalten

Um SVG-Logopfade mit jsPDF in ein im Browser erzeugtes PDF zu übertragen, lade svg2pdf.js, übergib ein SVG-Element an await doc.svg(...) und speichere anschließend das Dokument. Wähle addSvgAsImage nur, wenn ein Rasterbild akzeptabel ist. Seine SVG-Eingabe bedeutet nicht, dass das resultierende PDF SVG-Pfade enthält.

Das Anwendungsbeispiel von svg2pdf.js dokumentiert den elementbasierten asynchronen Aufruf. Die SVG-Modulimplementierung von jsPDF zeigt den anderen Weg: auf ein Canvas rendern, ein JPEG kodieren und dieses Bild dem PDF hinzufügen.

Behalte bei einem Rechnungs-, Ticket- oder Berichtslogo das ursprüngliche SVG als bearbeitbare Masterdatei. Dieser Leitfaden testet ein einfaches zweifarbiges Emblem, legt seine Platzierung in PDF-Punkten fest und prüft die gespeicherten Objekte. Er setzt nicht voraus, dass jede SVG-Funktion die Konvertierung übersteht.

Wähle die benötigte Ausgabe

Der dritte Weg ist nützlich, wenn du ein vorbereitetes Logo-PDF statt eines in JavaScript zusammengesetzten Dokuments brauchst. Für Dokumentabläufe außerhalb des Browsers erklärt der Leitfaden zu SVG in LaTeX einen separaten Export- und Einbindungsprozess. Für eine Node-Dokumentverarbeitung unterscheidet das PDFKit-SVG-Beispiel zwischen dem Einfügen in ein vollständiges Dokument und dem Parsen eines einzelnen Pfads.

Wenn die Ausgabedatei eine Präsentation ist, verwende den Leitfaden zu SVG-Bildern in PptxGenJS. Er prüft das Seitenverhältnis des Logos, die exportierten PPTX-Mediendateien und seine Darstellung in der Präsentationsanwendung, statt PDF-Exporteinstellungen auf ein anderes Dokumentformat zu übertragen.

Führe zuerst ein kleines Beispiel mit festen Versionen aus

Das Beispiel wurde in einem Browser mit jsPDF 4.2.1 und svg2pdf.js 2.8.1 ausgeführt. Das sind die getesteten Versionen, kein Versprechen für künftige Veröffentlichungen. Das Paket heißt svg2pdf.js, einschließlich der Endung; ähnlich benannte Pakete können andere Abläufe bedienen.

Installiere in einem kleinen Browser-Projekt mit JavaScript-Bundler:

npm install jspdf@4.2.1 svg2pdf.js@2.8.1

Verwende dieses eigens erstellte Emblem als Eingabe. Sein Ring hat durch die Even-odd-Füllregel eine echte Öffnung. Der zweite Pfad ist eine abgerundete Spitze. Es gibt keine Schriften, verlinkten Dateien, Filter oder eingebetteten Rasterbilder.

import { jsPDF } from 'jspdf';
import 'svg2pdf.js';
 
const svgText = `<svg xmlns="http://www.w3.org/2000/svg"
  width="240" height="160" viewBox="0 0 240 160">
  <path fill="#174d64" fill-rule="evenodd"
    d="M20 80 C20 15 120 15 120 80 C120 145 20 145 20 80 Z
       M48 80 C48 111 92 111 92 80 C92 49 48 49 48 80 Z"/>
  <path fill="#e66d45"
    d="M130 120 L170 35 Q178 20 188 35 L225 120 Z"/>
</svg>`;
 
async function makeVectorPdf() {
  const svg = new DOMParser()
    .parseFromString(svgText, 'image/svg+xml')
    .documentElement;
  const doc = new jsPDF({
    unit: 'pt',
    format: [300, 220],
    orientation: 'landscape'
  });
  await doc.svg(svg, { x: 30, y: 30, width: 240, height: 160 });
  return doc;
}
 
const doc = await makeVectorPdf();
doc.save('logo-vector.pdf');

Führe dies im Browser aus, nicht direkt in einem Node.js-Skript. Die Hinweise zur Verwendung und zum Umfang der Bibliothek verlangen ein funktionierendes Browser-DOM und beschreiben eingeschränkte SVG-Unterstützung. Lege diese Arbeit in einer serverseitig gerenderten Anwendung in den clientseitigen Export-Handler.

Die Zeichenfolge hier ist vertrauenswürdige, fest vorgegebene Grafik. Wenn deine Anwendung beliebige SVG-Uploads akzeptiert, ist XML-Parsing allein keine Bereinigung. Folge den Hinweisen der Bibliothek zur Bereinigung nutzerseitiger SVGs und zur Isolierung ihrer Ausführung, bevor du einen Upload-Ablauf aufbaust.

Lege die Platzierung unabhängig von der viewBox fest

In diesem Beispiel setzt unit: 'pt' die PDF-Maßeinheit auf Punkte. Die Seite ist 300 mal 220 Punkte groß; der Grafik-Viewport beginnt 30 Punkte vom linken und oberen Rand entfernt und belegt 240 mal 160 Punkte. Die Konstruktordokumentation von jsPDF beschreibt die Optionen für Dokumenteinheit, Format und Ausrichtung.

Die SVG-viewBox="0 0 240 160" beschreibt seine internen Koordinaten. Sie ist keine PDF-Seitengröße. Wenn Zielbreite und -höhe dasselbe Verhältnis von 3:2 haben, lässt sich die gewünschte Einpassung leicht prüfen. Verwende width: 120, height: 80, um die platzierte Grafik zu halbieren; die Quellpfadkoordinaten können unverändert bleiben.

Gib dem exportierten SVG explizite Abmessungen und eine sinnvolle viewBox, bevor du seine PDF-Position untersuchst. Ein unerwartet großer leerer Rand kann zur SVG-Zeichenfläche gehören. Das Verschieben von x und y verschiebt den gesamten SVG-Viewport einschließlich dieses Leerraums.

Prüfe beide gespeicherten PDFs

Zum Vergleich erzeugte derselbe Browser-Durchlauf auch diese bewusst rasterisierte Variante:

const raster = new jsPDF({
  unit: 'pt',
  format: [300, 220],
  orientation: 'landscape'
});
await raster.addSvgAsImage(svgText, 30, 30, 240, 160);
raster.save('logo-raster.pdf');

Der Test verwendete für diesen Weg die installierte canvg-Abhängigkeit von jsPDF, 3.0.11. Beide PDFs wurden gespeichert, erneut geöffnet und im selben Maßstab gerendert. Die Zeichnungs- und Bildprüfung von PyMuPDF meldete:

Der Inhaltsstrom der Vektordatei enthielt Kurvenbefehle und eine Even-odd-Füllung für den Ring. Die Rasterdatei platzierte ein Bildobjekt. Diese Zählwerte beschreiben diese kleine Testgrafik; ein komplexeres SVG kann andere Objekte erzeugen oder selbst Rasterinhalte enthalten.

Das schwarze Rechteck ist ein beobachtetes Ergebnis dieses Rasterexports, einschließlich der zuvor transparenten Ringöffnung. JPEG erhält keine Alpha-Transparenz; setze nicht voraus, dass transparente SVG-Bereiche diesen Weg überstehen. Prüfe den tatsächlich benötigten Hintergrund, besonders wenn das Logo auf einer farbigen Dokumentfläche liegen wird.

Zoomen allein reicht als Beleg nicht aus. Jeder PDF-Betrachter zeichnet letztlich Pixel auf deinen Bildschirm. Prüfe die PDF-Objekte und vergleiche die gespeicherte Darstellung mit der SVG-Masterdatei. Ein Befehl wie pdfimages -list logo-raster.pdf von Poppler kann eingebettete Bilder auflisten. Eine leere Bildliste allein beweist nicht, dass die gewünschten Formen korrekt exportiert wurden: Die Seite könnte leer sein. Prüfe auch Zeichnungsinhalt und Darstellung.

Behebe den fehlschlagenden Teil des Exports

Ein SVG kann bereits eine Bitmap umschließen. Die Verarbeitung dieser Datei durch einen vektorfähigen Exporter zeichnet ihre Pixel nicht in bearbeitbare Umrisse nach. Verwende den Leitfaden zur Prüfung eingebetteter Rasterbilder, bevor du PDF-Einstellungen änderst.

Dieser Test deckt weder Textlayout noch Filter, externe Bilder oder beliebiges CSS ab. svg2pdf.js begrenzt seinen Umfang ausdrücklich auf einen Teil von SVG. Folge für Schrift vor der Konvertierung seinen Anweisungen zur Schrifteinrichtung oder bereite Umrisse in der Designquelle vor, wenn diese Abwägung passend ist. Behalte eine Masterdatei mit bearbeitbarem Text, wenn spätere Textänderungen wichtig sind.

Bereite die Logoquelle mit PerfectVector vor

Wenn das Logo bereits saubere Vektorgrafik ist, verwende diese Quelle. Wenn nur ein PNG oder JPG übrig ist, kann PerfectVector vor dem PDF-Schritt bearbeitbare Formen rekonstruieren. Vektorisiere das Logo und prüfe dann seine äußere Kontur, kleinen Öffnungen und separaten Farben in einem SVG-Editor. Der Leitfaden zur Logovorbereitung behandelt diese Prüfung genauer.

PerfectVector bereitet die Rastergrafik für diesen Ablauf vor; es fügt jsPDF keine SVG-Unterstützung hinzu und repariert keine nicht unterstützten Exporter-Funktionen. Vergleiche die rekonstruierten Pfade mit deinem Originalbild, vereinfache oder zeichne Details bei Bedarf neu und wiederhole dann die PDF-Prüfung. Behalte ein Foto als Bild, wenn Nachzeichnen benötigte Details verwerfen würde. Der umfassendere Leitfaden zur Bildvektorisierung erklärt diese Quellwahl.

FAQ

Erhält addSvgAsImage mein SVG als Vektorpfade? Nein. Die getestete Implementierung von jsPDF 4.2.1 rendert das SVG über ein Canvas und bettet ein JPEG ein. Verwende svg2pdf.js mit doc.svg, wenn du unterstützte Geometrie in PDF-Zeichnungsinhalte umwandeln möchtest.

Akzeptiert doc.svg einen SVG-Dateinamen? Die gezeigte API nimmt ein SVG-DOM-Element. Lade und parse zuerst eine vertrauenswürdige Datei oder wähle ein vorhandenes SVG-Element aus. Übergib dieses Element dann an doc.svg und warte auf das Ergebnis.

Sieht jedes SVG im PDF genauso aus? Nein. svg2pdf.js unterstützt nur einen begrenzten Teil von SVG. Teste deine tatsächliche Grafik einschließlich Schriften, Bildern, Effekten, Abmessungen und Hintergründen und öffne das gespeicherte PDF vor der Verwendung erneut.

Quellen

1. yWorks — Verwendung und Umfang von svg2pdf.js — SVG-Element-API, asynchrone Konvertierung, Schrifteinrichtung, Browser-Anforderungen und Grenzen des unterstützten Umfangs.
2. jsPDF — SVG-Modul in Version 4.2.1 — Die von addSvgAsImage verwendete Canvas- und JPEG-Implementierung.
3. jsPDF — Konstruktorreferenz — PDF-Dokumenteinheiten, Seitenformat und Ausrichtungsoptionen.
4. PyMuPDF — Seitenprüfung — Methoden zur Zeichnungs- und Bildprüfung der gespeicherten Testdateien.

Hast du nur ein Rasterlogo? Bereite aus deinem Logo ein bearbeitbares SVG vor, prüfe Konturen und Öffnungen, exportiere es dann mit dem gewählten PDF-Weg und kontrolliere die gespeicherten Objekte und den Hintergrund.