SVG con jsPDF: conservare i tracciati del logo nel PDF

Per inserire i tracciati di un logo SVG in un PDF generato nel browser con jsPDF, carica svg2pdf.js, passa un elemento SVG a await doc.svg(...), poi salva il documento. Scegli addSvgAsImage soltanto quando un'immagine raster è accettabile. Il suo ingresso SVG non significa che il PDF risultante contenga tracciati SVG.

L'esempio d'uso di svg2pdf.js documenta la chiamata asincrona basata su elementi. L'implementazione del modulo SVG di jsPDF mostra l'altro percorso: renderizzare su un canvas, codificare un JPEG e aggiungere quell'immagine al PDF.

Per il logo di una fattura, un biglietto o un report, conserva l'SVG originale come file principale modificabile. Questa guida testa un semplice emblema a due colori, ne imposta il posizionamento in punti PDF e controlla gli oggetti salvati. Non presume che ogni funzionalità SVG sopravviva alla conversione.

Scegli l'output necessario

Il terzo percorso è utile quando serve un logo PDF preparato anziché un documento assemblato in JavaScript. Per procedimenti documentali fuori dal browser, la guida agli SVG in LaTeX spiega un processo separato di esportazione e inclusione. Per un processo documentale Node, l'esempio SVG con PDFKit distingue l'inserimento dell'intero documento SVG dal parsing di un singolo tracciato.

Quando il file da consegnare è una presentazione, usa la guida alle immagini SVG in PptxGenJS. Controlla proporzioni del logo, risorse multimediali PPTX esportate e aspetto nell'applicazione di presentazione, anziché applicare impostazioni di esportazione PDF a un formato documentale diverso.

Esegui prima un piccolo esempio con versioni fissate

L'esempio è stato eseguito in un browser con jsPDF 4.2.1 e svg2pdf.js 2.8.1. Sono le versioni testate, non una promessa sui rilasci futuri. Il pacchetto si chiama svg2pdf.js, incluso il suffisso; pacchetti dal nome simile possono servire a procedimenti diversi.

In un piccolo progetto browser con un bundler JavaScript, installa:

npm install jspdf@4.2.1 svg2pdf.js@2.8.1

Usa questo emblema originale come ingresso. Il suo anello ha una vera apertura grazie alla regola di riempimento even-odd. Il secondo tracciato è una punta arrotondata. Non ci sono font, file collegati, filtri o immagini raster incorporate.

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');

Esegui questo codice nel browser, non direttamente in uno script Node.js. Le note d'uso e di ambito della libreria richiedono un DOM del browser funzionante e descrivono un supporto SVG limitato. In un'applicazione renderizzata sul server, inserisci questo lavoro nel gestore di esportazione sul client.

La stringa qui è grafica fissa e attendibile. Se l'applicazione accetta caricamenti SVG arbitrari, il solo parsing XML non è una sanitizzazione. Segui le indicazioni della libreria per sanitizzare SVG forniti dagli utenti e isolarne l'esecuzione prima di costruire un procedimento di caricamento.

Imposta il posizionamento separatamente dal viewBox

In questo esempio, unit: 'pt' rende le misure PDF punti. La pagina è di 300 per 220 punti; il viewport della grafica parte a 30 punti da sinistra e dall'alto e occupa 240 per 160 punti. La documentazione del costruttore di jsPDF descrive opzioni di unità del documento, formato e orientamento.

Il viewBox="0 0 240 160" dell'SVG descrive le coordinate interne. Non è una dimensione pagina PDF. Mantenere larghezza e altezza di destinazione nello stesso rapporto 3:2 facilita il controllo dell'adattamento previsto. Per dimezzare la grafica inserita, usa width: 120, height: 80; le coordinate dei tracciati sorgente possono restare invariate.

Assegna all'SVG esportato dimensioni esplicite e un viewBox sensato prima di diagnosticare la posizione nel PDF. Un bordo vuoto inaspettatamente grande può appartenere alla tela SVG. Spostare x e y sposta l'intero viewport SVG, incluso quello spazio vuoto.

Esamina entrambi i PDF salvati

Per il confronto, la stessa esecuzione nel browser ha creato anche questa versione volutamente rasterizzata:

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

Il test ha usato la dipendenza canvg installata da jsPDF, 3.0.11, per quel percorso. Entrambi i PDF sono stati salvati, riaperti e renderizzati alla stessa scala. L'ispezione di disegni e immagini di PyMuPDF ha riportato:

Il flusso di contenuto del file vettoriale conteneva comandi di curva e un riempimento even-odd per l'anello. Il file raster inseriva un oggetto immagine. Questi conteggi descrivono questo piccolo campione; un SVG più complesso può produrre oggetti diversi o contenere contenuti raster propri.

Il rettangolo nero è un risultato osservato di questa esportazione raster, inclusa l'apertura prima trasparente dell'anello. JPEG non conserva la trasparenza alpha; non supporre che le regioni trasparenti di un SVG sopravvivano a quel percorso. Controlla lo sfondo realmente necessario, soprattutto quando il logo sarà su un pannello colorato del documento.

Lo zoom da solo non è una prova sufficiente. Ogni visualizzatore PDF finisce per disegnare pixel sullo schermo. Esamina gli oggetti del PDF e confronta l'aspetto salvato con l'originale SVG. Un comando come pdfimages -list logo-raster.pdf di Poppler può elencare le immagini incorporate. Un elenco immagini vuoto da solo non dimostra che le forme previste siano state esportate correttamente: la pagina potrebbe essere vuota. Controlla anche contenuto di disegno e aspetto.

Correggi la parte dell'esportazione che fallisce

Un SVG può già contenere una bitmap. Passare quel file attraverso un esportatore capace di gestire vettori non ricalca i suoi pixel in profili modificabili. Usa la guida all'ispezione del raster incorporato prima di cambiare le impostazioni PDF.

Questo test non copre layout del testo, filtri, immagini esterne o CSS arbitrario. svg2pdf.js limita esplicitamente il proprio ambito a un sottoinsieme di SVG. Per le scritte, segui le sue istruzioni di configurazione dei font prima della conversione oppure prepara tracciati nella sorgente grafica quando quel compromesso è appropriato. Conserva un originale con testo modificabile se contano cambiamenti futuri delle parole.

Prepara il logo sorgente con PerfectVector

Se il logo è già grafica vettoriale pulita, usa quella sorgente. Se resta soltanto un PNG o JPG, PerfectVector può aiutare a recuperare forme modificabili prima del passaggio PDF. Vettorializza il logo, poi esamina contorno esterno, piccole aperture e colori separati in un editor SVG. La guida alla preparazione dei loghi descrive più nel dettaglio quell'ispezione.

PerfectVector prepara la grafica raster per questo procedimento; non aggiunge supporto SVG a jsPDF e non corregge funzionalità non supportate dell'esportatore. Confronta i tracciati recuperati con l'immagine originale, semplifica o ridisegna i dettagli che ne hanno bisogno, poi ripeti il controllo PDF. Conserva una fotografia come immagine quando il ricalco eliminerebbe dettagli necessari. La più ampia guida alla vettorializzazione delle immagini spiega quella scelta della sorgente.

FAQ

addSvgAsImage conserva il mio SVG come tracciati vettoriali? No. L'implementazione jsPDF 4.2.1 testata renderizza l'SVG attraverso un canvas e incorpora un JPEG. Usa svg2pdf.js con doc.svg quando ti serve che la geometria supportata venga convertita in contenuti di disegno PDF.

doc.svg accetta il nome di un file SVG? L'API dimostrata prende un elemento DOM SVG. Carica e analizza prima un file attendibile oppure seleziona un elemento SVG esistente, poi passa quell'elemento a doc.svg e attendi il risultato.

Ogni SVG avrà lo stesso aspetto nel PDF? No. svg2pdf.js supporta una parte limitata di SVG. Testa la tua grafica effettiva, inclusi font, immagini, effetti, dimensioni e sfondi, e riapri il PDF salvato prima di usarlo.

Fonti

1. yWorks — Uso e ambito di svg2pdf.js — API degli elementi SVG, conversione asincrona, configurazione dei font, requisiti del browser e limiti dell'ambito supportato.
2. jsPDF — Modulo SVG alla versione 4.2.1 — Implementazione canvas e JPEG usata da addSvgAsImage.
3. jsPDF — Documentazione del costruttore — Unità del documento PDF, formato pagina e opzioni di orientamento.
4. PyMuPDF — Ispezione delle pagine — Metodi di ispezione di disegni e immagini usati per esaminare i file di test salvati.

Hai soltanto un logo raster? Prepara un SVG modificabile dal logo, controlla contorni e aperture, poi esportalo con il percorso PDF scelto ed esamina oggetti salvati e sfondo.