SVG PDFKit: Tempatkan Logo Vektor Tanpa Rasterisasi

Untuk menempatkan logo SVG lengkap dalam PDF yang dihasilkan Node, gunakan svg-to-pdfkit bersama PDFKit dan berikan markup SVG ke SVGtoPDF(doc, svg, x, y, options). doc.path() bawaan PDFKit menerima data path SVG, seperti nilai atribut d sebuah path. Metode itu tidak mengimpor dokumen SVG yang melingkupinya, bentuk lain, atau gayanya.

Perbedaan ini penting untuk logo dengan beberapa warna dan bukaan di tengahnya. Menyalin satu path dapat meninggalkan sebagian karya. Mengubah seluruh logo menjadi PNG mempertahankan render raster, tetapi mengorbankan keluaran PDF berbasis path yang Anda inginkan.

Panduan ini memakai lambang asli, skrip Node lengkap, dan pemeriksaan PDF tersimpan. Jika Anda sudah memiliki logo vektor yang bisa diedit, simpan sebagai sumber. Rekonstruksi raster dilakukan sebelum tahap impor ini.

Pilih penyisipan SVG lengkap atau satu path

Dokumentasi vektor PDFKit menjelaskan parser path dan metode gambar di sekitarnya. Pustaka SVG-to-PDFKit yang terpisah menangani markup SVG lengkap.

Dokumentasi image PDFKit mencantumkan PNG dan JPEG untuk doc.image(). Jangan memperlakukan pemanggilan itu sebagai pengimpor SVG lengkap.

Misalnya, ini adalah penggunaan API path yang valid:

doc.save();
doc.fillColor('#eeaa42');
doc.path('M125 100L175 20L225 100Z').fill();
doc.restore();

Kode menggambar segitiga lambang kami pada koordinat path-nya. Kode tidak memulihkan cincin atau bilah hijau kebiruan dari bagian lain file sumber. Gunakan jalur dokumen lengkap di bawah ketika bagian itu harus bersama.

Jika PDF Anda disusun dalam browser dengan jsPDF, ikuti alur SVG jsPDF yang terpisah. Untuk dokumen komponen React, gunakan alur logo SVG React-pdf. Untuk dokumen Python, bandingkan pemeriksaan impor dan ukuran ReportLab dengan penempatan SVG langsung fpdf2.

Jalankan contoh kecil dengan versi paket tetap

Kami menjalankan contoh ini dengan PDFKit 0.20.2 dan SVG-to-PDFKit 0.1.8. Versi itu mengidentifikasi pasangan dependensi yang diuji; periksa keluaran sendiri setelah meningkatkan salah satu paket.

Dalam proyek Node baru, instal:

npm install --save-exact pdfkit@0.20.2 svg-to-pdfkit@0.1.8

Simpan sebagai logo.svg. Cincin dan bukaannya berbagi satu path dengan fill-rule="evenodd"; segitiga emas dan bilah hijau kebiruan merupakan bentuk terpisah. File tidak berisi font, image, atau efek.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120">
  <path fill="#147d78" fill-rule="evenodd"
    d="M110 60A50 50 0 1 1 10 60A50 50 0 1 1 110 60Z
       M85 60A25 25 0 1 1 35 60A25 25 0 1 1 85 60Z"/>
  <path fill="#eeaa42" d="M125 100L175 20L225 100Z"/>
  <rect x="227" y="20" width="8" height="80" fill="#147d78"/>
</svg>

Simpan kode berikut sebagai place-logo.cjs dalam direktori yang sama, lalu jalankan node place-logo.cjs:

const fs = require('node:fs');
const { finished } = require('node:stream/promises');
const PDFDocument = require('pdfkit');
const SVGtoPDF = require('svg-to-pdfkit');
 
async function main() {
  const svg = fs.readFileSync('logo.svg', 'utf8');
  const doc = new PDFDocument({ size: [800, 450], margin: 0 });
  const output = fs.createWriteStream('logo.pdf');
  doc.pipe(output);
  const warnings = [];
  SVGtoPDF(doc, svg, 72, 150, {
    width: 180, height: 90,
    preserveAspectRatio: 'xMinYMin meet',
    warningCallback: message => warnings.push(message),
  });
  SVGtoPDF(doc, svg, 432, 150, {
    width: 90, height: 45,
    preserveAspectRatio: 'xMinYMin meet',
    warningCallback: message => warnings.push(message),
  });
  doc.end();
  await finished(output);
  fs.writeFileSync('warnings.json', JSON.stringify(warnings, null, 2));
  if (warnings.length) process.stderr.write(warnings.join('\n') + '\n');
}
main().catch(error => {
  process.stderr.write(error.stack + '\n');
  process.exitCode = 1;
});

PDFKit menghasilkan stream. Memanggil doc.end() menyelesaikan dokumen; skrip lalu menunggu stream keluaran selesai sebelum kembali. Dokumentasi getting started menjelaskan model stream dan dimensi halaman dalam point PDF, dengan 72 point per inci.

Di sini, kedua viewport penempatan berukuran 180 × 90 pt dan 90 × 45 pt, atau 2.5 × 1.25 inci dan 1.25 × 0.625 inci. Keduanya cocok dengan rasio viewBox sumber 2:1. Bentuk yang digambar memiliki margin di dalam viewBox itu, sehingga batas terlihatnya lebih kecil daripada viewport. Ukur kanvas dan karya yang berwarna secara terpisah ketika meratakan logo dengan teks di dekatnya.

Pengimpor mendokumentasikan width dan height sebagai viewport awal. Opsi preserveAspectRatio-nya mengendalikan penyesuaian di dalamnya. Contoh ini memakai proporsi cocok dan dimensi eksplisit agar tidak bergantung pada default seukuran halaman. Jangan memakai assumePt sebagai perbaikan umum untuk logo yang terlalu kecil; periksa dimensi sumber, viewBox, dan viewport target terlebih dahulu.

Periksa PDF, lalu periksa tampilannya

logo.pdf minimal kami memiliki satu halaman 800 × 450 pt. Dengan pypdf 6.10.0, kami menemukan 24 operasi kurva kubik, dua operasi isian even-odd, dan nol image pada halaman. Sumber daya halaman tidak berisi font atau XObject. Pengimpor tidak mengeluarkan peringatan untuk contoh ini.

Hasil itu mendukung kesimpulan terbatas: lambang asli tanpa image ini digambar dengan geometri PDF dalam versi yang diuji. Hasil tidak membuktikan bahwa sembarang SVG menjadi PDF yang seluruhnya vektor. Logo berisi foto tertanam tetap membutuhkan pemeriksaan terpisah.

Kami juga merender versi berlabel dengan Poppler. Versi memakai SVG dan dua ukuran viewport yang sama, dengan penempatan dipindahkan ke panel perbandingan. Latar panel pucat tetap terlihat melalui kedua cincin, dan segitiga serta bilah sempit tetap terpisah dari cincin.

Pembesaran yang tajam saja merupakan bukti lemah: bitmap yang cukup besar juga dapat tampak tajam. Sebaliknya, menemukan operasi kurva di suatu tempat dalam laporan tidak memberi tahu apakah logonya dirasterkan. Isolasi karya dalam PDF pengujian kecil sebelum memeriksa dokumen yang juga berisi foto dan grafik.

Untuk logo Anda sendiri, periksa keduanya:

1. Periksa konten halaman PDF dan objek yang dirujuk dengan alat pemeriksaan PDF. Cari instruksi gambar pada bagian tempat logo digambar dan perhitungkan objek image. PDF lebih kompleks dapat menempatkan konten dalam Form XObject, sehingga hitungan tingkat atas tidak selalu cukup.
2. Buka PDF tersimpan dalam penampil tujuan dan bandingkan dengan sumber. Periksa lubang, warna terpisah, pemotongan, margin, dan detail halus pada ukuran penyerahan sebenarnya.

Simpan SVG asli di samping kode pembuatan PDF. Jika sumber hanya membungkus piksel, gunakan diagnosis image tertanam sebelum menganggap ekstensi SVG membuktikan sesuatu tentang geometrinya.

Jaga font dan efek dalam alur yang diuji

SVG-to-PDFKit mencantumkan filter dan foreignObject sebagai fitur yang tidak didukung. Pustaka juga mendokumentasikan kebutuhan pendaftaran font dan callback. Gunakan atribut presentasi SVG eksplisit untuk logo kecil di sisi server, dan tinjau peringatan bersama hasil render. CSS yang dihitung browser adalah opsi terpisah untuk elemen SVG yang diberikan; berbeda dari memberikan markup ke skrip Node ini. Lihat dokumentasi fitur dan font pustaka.

Lambang kami sengaja menghindari teks. Untuk tulisan sebenarnya, berikan dan uji font yang dimaksud atau pertahankan tulisan outline yang disetujui dalam master vektor. Dokumentasi font PDFKit menjelaskan penyematan serta pendaftaran font. Teks dokumen dan outline logo memiliki kebutuhan penyuntingan berbeda; men-trace tangkapan layar tulisan tidak akan mengidentifikasi font asli.

Jika tanda merek bergantung pada efek yang tidak dapat direproduksi pengimpor ini, buat ulang efek sebagai geometri yang sesuai atau pilih alur ekspor lain dan verifikasi. Penyisipan raster juga merupakan pilihan valid ketika tampilan lebih penting daripada mempertahankan path. Jangan menjelaskan pilihan itu sebagai ekspor yang mempertahankan vektor.

Contoh memakai warna RGB. Path yang dipertahankan saja tidak membuktikan terpenuhinya kebutuhan warna, PDF/X, atau pracetak percetakan. Konfirmasikan dengan penerima; panduan format logo membantu membedakan master yang bisa diedit dari file penyerahan.

Rekonstruksikan logo yang hanya berupa raster sebelum penyisipan

Jika logo asli hanya tersedia sebagai PNG atau JPG, vektorisasi logo PerfectVector dapat menyiapkan kandidat SVG sebelum tahap PDFKit. Bandingkan kontur, bukaan kecil, dan wilayah warna terpisah dengan sumber, lalu jalankan kandidat itu melalui pemeriksaan penempatan serta PDF yang sama.

Gunakan vektor asli kapan pun tersedia. Untuk tulisan rusak atau geometri merek yang persis, ketik ulang atau gambar ulang bagian terkait di editor. Panduan vektorisasi logo menjelaskan keputusan sumber tersebut. PerfectVector menyiapkan path karya; PDFKit dan pengimpornya menangani penempatan dokumen. Lambang pengujian artikel ini adalah karya vektor buatan tangan, bukan hasil konversi terukur.

FAQ

Bisakah PDFKit mengimpor SVG lengkap dengan doc.path()? Tidak. Metode path membaca data path SVG. Gunakan SVG-to-PDFKit untuk dokumen lengkap dalam alur ini, atau gambar dan beri gaya setiap bentuk sendiri.

Apakah SVG-to-PDFKit menjamin PDF tanpa gambar raster? Tidak. Lambang tanpa image yang diuji menghasilkan operasi gambar dan nol image pada halaman. Periksa masukan dan PDF ekspor Anda sendiri, terutama ketika SVG berisi image tertanam atau fitur di luar kumpulan yang didukung pengimpor.

Mengapa logo terlihat lebih kecil daripada width dan height saya? Opsi tersebut mendefinisikan viewport impor. Ruang kosong dalam viewBox sumber tetap menjadi bagian tata letak, dan penyesuaian rasio aspek dapat menyisakan ruang tambahan. Periksa batas karya sebelum mengubah ukuran PDF yang diminta.

Sources

1. PDFKit — Grafik vektor — Mendokumentasikan parsing data path SVG, operasi pewarnaan, dan keadaan grafik.
2. SVG-to-PDFKit — Penggunaan dan batasan — Mendefinisikan penyisipan SVG lengkap, opsi viewport, peringatan, font, dan fitur yang didukung.
3. PDFKit — Images — Mencantumkan format bitmap yang diterima API image.
4. PDFKit — Getting started — Menjelaskan stream dokumen, finalisasi, dan ukuran halaman dalam point PDF.
5. PDFKit — Fonts — Menjelaskan penyematan font dan pendaftaran font bernama.

Jika logo dokumen Anda berasal dari gambar raster, siapkan kandidat SVG dengan PerfectVector, periksa bukaan dan konturnya, lalu tempatkan pada ukuran PDF yang diperlukan dan periksa file tersimpan.