SVG jsPDF: Pertahankan Path Logo dalam PDF Buatan Browser

Untuk memasukkan path logo SVG ke PDF yang dibuat di browser dengan jsPDF, muat svg2pdf.js, berikan elemen SVG ke await doc.svg(...), lalu simpan dokumen. Pilih addSvgAsImage hanya jika gambar raster dapat diterima. Input SVG-nya tidak berarti PDF yang dihasilkan berisi path SVG.

Contoh penggunaan svg2pdf.js mendokumentasikan pemanggilan asinkron berbasis elemen. Implementasi modul SVG jsPDF menunjukkan jalur lain: render ke canvas, enkode JPEG, dan tambahkan gambar itu ke PDF.

Untuk logo faktur, tiket, atau laporan, pertahankan SVG asli sebagai master yang dapat diedit. Panduan ini menguji lambang dua warna sederhana, mengatur penempatannya dalam poin PDF, dan memeriksa objek yang disimpan. Panduan ini tidak mengasumsikan bahwa setiap fitur SVG tetap ada setelah konversi.

Pilih output yang Anda perlukan

Jalur ketiga berguna jika Anda membutuhkan PDF logo yang telah disiapkan alih-alih dokumen yang dirangkai dalam JavaScript. Untuk alur kerja dokumen di luar browser, panduan SVG dalam LaTeX menjelaskan proses ekspor dan penyertaan yang terpisah. Untuk pipeline dokumen Node, contoh SVG PDFKit membedakan penyisipan dokumen lengkap dari penguraian satu path.

Jika hasil yang diserahkan adalah slide presentasi, gunakan panduan gambar SVG PptxGenJS. Panduan itu memeriksa rasio aspek logo, media PPTX hasil ekspor, dan tampilannya dalam aplikasi presentasi, alih-alih menerapkan pengaturan ekspor PDF ke format dokumen yang berbeda.

Jalankan contoh kecil dengan versi yang dikunci terlebih dahulu

Contoh ini dijalankan di browser dengan jsPDF 4.2.1 dan svg2pdf.js 2.8.1. Ini adalah versi yang diuji, bukan jaminan tentang rilis mendatang. Paketnya bernama svg2pdf.js, termasuk akhiran tersebut; paket dengan nama mirip dapat melayani alur kerja yang berbeda.

Dalam proyek browser kecil dengan bundler JavaScript, instal:

npm install jspdf@4.2.1 svg2pdf.js@2.8.1

Gunakan lambang orisinal ini sebagai input. Cincinnya memiliki bukaan sungguhan melalui aturan isian even-odd. Path kedua adalah puncak membulat. Tidak ada font, file tertaut, filter, atau gambar raster tertanam.

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

Jalankan ini di browser, bukan langsung dalam skrip Node.js. Catatan penggunaan dan cakupan pustaka mewajibkan DOM browser yang berfungsi dan menjelaskan dukungan SVG yang terbatas. Dalam aplikasi dengan rendering server, letakkan pekerjaan ini dalam handler ekspor di sisi klien.

String di sini adalah artwork tetap yang tepercaya. Jika aplikasi Anda menerima unggahan SVG sembarang, mengurai XML saja bukan sanitasi. Ikuti panduan pustaka untuk menyanitasi SVG yang diberikan pengguna dan mengisolasi eksekusinya sebelum membangun alur kerja unggahan.

Atur penempatan secara terpisah dari viewBox

Dalam contoh ini, unit: 'pt' membuat pengukuran PDF menggunakan poin. Halamannya berukuran 300 kali 220 poin; viewport artwork dimulai 30 poin dari kiri dan atas serta menempati 240 kali 160 poin. Dokumentasi konstruktor jsPDF menjelaskan opsi unit dokumen, format, dan orientasi.

viewBox="0 0 240 160" SVG menjelaskan koordinat internalnya. Itu bukan ukuran halaman PDF. Menjaga lebar dan tinggi tujuan pada rasio 3:2 yang sama membuat penyesuaian yang dimaksudkan mudah diperiksa. Untuk memperkecil artwork yang ditempatkan menjadi separuh, gunakan width: 120, height: 80; koordinat path sumber dapat tetap sama.

Berikan dimensi eksplisit dan viewBox yang masuk akal pada SVG hasil ekspor sebelum men-debug posisi PDF-nya. Batas kosong yang terlalu besar dapat berasal dari canvas SVG. Memindahkan x dan y memindahkan seluruh viewport SVG, termasuk ruang kosong tersebut.

Periksa kedua PDF yang disimpan

Sebagai perbandingan, pengujian browser yang sama juga membuat versi yang sengaja dirasterisasi ini:

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

Pengujian menggunakan dependensi canvg yang terinstal bersama jsPDF, 3.0.11, untuk jalur tersebut. Kedua PDF disimpan, dibuka kembali, dan dirender pada skala yang sama. Pemeriksaan path dan gambar raster PyMuPDF melaporkan:

Content stream file vektor berisi perintah kurva dan isian even-odd untuk cincin. File raster menempatkan objek gambar. Jumlah ini menjelaskan fixture kecil ini; SVG yang lebih kompleks dapat menghasilkan objek berbeda atau memiliki konten raster sendiri.

Persegi panjang hitam merupakan hasil yang diamati dari ekspor raster ini, termasuk bukaan cincin yang sebelumnya transparan. JPEG tidak mempertahankan transparansi alpha; jangan mengasumsikan wilayah transparan SVG akan tetap ada melalui jalur itu. Periksa latar belakang yang benar-benar Anda perlukan, terutama ketika logo akan ditempatkan pada panel dokumen berwarna.

Memperbesar tampilan saja bukan bukti yang cukup. Setiap penampil PDF pada akhirnya menggambar piksel di layar Anda. Periksa objek PDF dan bandingkan tampilan tersimpan dengan master SVG. Perintah seperti pdfimages -list logo-raster.pdf dari Poppler dapat mencantumkan gambar tertanam. Daftar gambar kosong saja tidak membuktikan bahwa bentuk yang dimaksudkan diekspor dengan benar: halamannya mungkin kosong. Periksa konten geometri dan tampilannya juga.

Perbaiki bagian ekspor yang gagal

SVG dapat sudah membungkus bitmap. Melewatkan file tersebut melalui exporter yang mendukung vektor tidak menelusuri pikselnya menjadi outline yang dapat diedit. Gunakan panduan pemeriksaan raster tertanam sebelum mengubah pengaturan PDF.

Pengujian ini tidak mencakup tata letak teks, filter, gambar eksternal, atau CSS sembarang. svg2pdf.js secara eksplisit membatasi cakupannya pada subset SVG. Untuk tulisan, ikuti instruksi penyiapan font sebelum konversi, atau siapkan outline dalam sumber desain ketika kompromi tersebut sesuai. Pertahankan master dengan teks yang dapat diedit jika perubahan kata di masa mendatang penting.

Siapkan sumber logo dengan PerfectVector

Jika logo sudah merupakan artwork vektor yang bersih, gunakan sumber tersebut. Jika hanya PNG atau JPG yang tersisa, PerfectVector dapat membantu memulihkan bentuk yang dapat diedit sebelum langkah PDF. Vektorisasikan logo, lalu periksa kontur luar, bukaan kecil, dan warna terpisahnya di editor SVG. Panduan persiapan logo membahas pemeriksaan itu secara lebih terperinci.

PerfectVector menyiapkan artwork raster untuk alur kerja ini; alat ini tidak menambahkan dukungan SVG ke jsPDF atau memperbaiki fitur yang tidak didukung exporter. Bandingkan path yang dipulihkan dengan gambar asli Anda, sederhanakan atau gambar ulang detail yang memerlukannya, lalu jalankan kembali pemeriksaan PDF. Pertahankan foto sebagai gambar jika penelusuran akan membuang detail yang Anda perlukan. Panduan vektorisasi gambar yang lebih luas menjelaskan pilihan sumber tersebut.

FAQ

Apakah addSvgAsImage mempertahankan SVG saya sebagai path vektor? Tidak. Implementasi jsPDF 4.2.1 yang diuji merender SVG melalui canvas dan menanamkan JPEG. Gunakan svg2pdf.js dengan doc.svg jika Anda membutuhkan geometri yang didukungnya dikonversi menjadi konten geometri PDF.

Apakah doc.svg menerima nama file SVG? API yang diperagakan menerima elemen DOM SVG. Muat dan urai file tepercaya terlebih dahulu, atau pilih elemen SVG yang sudah ada, lalu berikan elemen tersebut ke doc.svg dan tunggu hasilnya.

Apakah setiap SVG akan terlihat sama dalam PDF? Tidak. svg2pdf.js mendukung bagian SVG yang terbatas. Uji artwork Anda yang sebenarnya, termasuk font, gambar, efek, dimensi, dan latar belakangnya, lalu buka kembali PDF tersimpan sebelum menggunakannya.

Sources

1. yWorks — Penggunaan dan cakupan svg2pdf.js — API elemen SVG, konversi asinkron, penyiapan font, persyaratan browser, dan batas cakupan yang didukung.
2. jsPDF — Modul SVG versi 4.2.1 — Implementasi canvas dan JPEG yang digunakan addSvgAsImage.
3. jsPDF — Referensi konstruktor — Unit dokumen PDF, format halaman, dan opsi orientasi.
4. PyMuPDF — Pemeriksaan halaman — Metode pemeriksaan path dan gambar raster yang digunakan untuk meneliti file pengujian tersimpan.

Hanya memiliki logo raster? Siapkan SVG yang dapat diedit dari logo Anda, periksa kontur dan bukaannya, lalu ekspor dengan jalur PDF yang dipilih dan periksa objek serta latar belakang yang disimpan.