Logo SVG React-pdf: Render Path dalam PDF Anda

Untuk logo SVG kecil dalam @react-pdf/renderer, susun karya dengan komponen Svg, Path, dan komponen lain yang didukung. Berikan ukuran eksplisit pada Svg luar dan pertahankan viewBox sumber. Dokumentasi Image renderer mencantumkan masukan PNG dan JPG; membungkus URL SVG dalam Image bukan jalur vektor yang dijelaskan di sini.

Panduan ini memakai contoh Node lengkap dengan lambang persegi dan bukaan di tengahnya. Kami merender PDF dengan versi dependensi tetap dan memeriksa hasilnya. Contoh memisahkan tiga hal yang mudah tercampur: karya sumber, pohon komponen, dan ukuran penempatan dalam PDF.

Periksa paket React PDF yang Anda gunakan

Artikel ini menghasilkan dokumen dengan @react-pdf/renderer. Paket lain bernama react-pdf menampilkan PDF yang sudah ada. Periksa impor dalam file Anda sebelum menyalin solusi dari hasil pencarian.

Di dalam Document renderer, gunakan komponen yang diekspor renderer itu. Elemen huruf kecil svg dan path milik browser berada dalam lingkungan rendering berbeda. Referensi komponen SVG resmi mendefinisikan Svg sebagai wadah viewport dan menunjukkan bentuk React-pdf yang diimpor di dalamnya.

Referensi Image menjelaskan masukan bitmap. PNG sebagai alternatif dapat berguna ketika tampilan rumit lebih penting daripada mempertahankan geometri vektor. Itu mengubah hasil yang diserahkan, jadi simpan master vektor secara terpisah.

Ada juga paket resmi @react-pdf/svg. README-nya mendokumentasikan parseSvg(), yang mengembalikan pohon node primitif dan mengonversi nama atribut ke camelCase. Dokumentasi menyatakan elemen yang tidak didukung dilewati dengan peringatan. Itu merupakan kontrak parser, bukan janji bahwa setiap SVG browser dirender identik. Contoh di bawah memakai komponen eksplisit agar geometri dan pewarnaannya mudah diperiksa.

Render logo minimal sebelum mengimpor karya Anda sendiri

Kami menjalankan contoh ini dengan @react-pdf/renderer 4.9.0, React 19.2.4, dan Node 22.19.0. Versi ini mengidentifikasi pengaturan yang diuji; tidak menjamin perilaku pohon dependensi berbeda.

Dalam direktori baru, instal kedua paket runtime:

npm install --save-exact @react-pdf/renderer@4.9.0 react@19.2.4

Simpan sebagai logo.mjs, lalu jalankan node logo.mjs. Contoh memakai React.createElement agar Node dapat mengeksekusinya tanpa tahap build JSX.

import React from 'react';
import { fileURLToPath } from 'node:url';
import {
  Document, Page, Svg, Path, Rect, renderToFile,
} from '@react-pdf/renderer';
 
const h = React.createElement;
const ring = 'M10 10H90V90H10Z M30 30H70V70H30Z';
 
const logo = h(
  Svg,
  { width: 144, height: 144, viewBox: '0 0 100 100' },
  h(Rect, {
    x: 0, y: 0, width: 100, height: 100, fill: '#f3ede2',
  }),
  h(Path, { d: ring, fill: '#087f8c', fillRule: 'evenodd' }),
);
 
await renderToFile(
  h(Document, null,
    h(Page, { size: 'A4', style: { padding: 36 } }, logo),
  ),
  fileURLToPath(new URL('./logo.pdf', import.meta.url)),
);

Persegi luar dan dalam berbagi satu path majemuk. fillRule: 'evenodd' membuat persegi dalam terbuka, memperlihatkan persegi panjang pucat di bawahnya. Tidak ada bidang putih yang menutup tengah. Karena itu, bukaan menjadi pemeriksaan yang berguna ketika Anda mengganti contoh dengan logo yang berisi rongga huruf atau potongan.

Koordinat SVG membentang 100 satuan pada setiap arah, sedangkan viewport yang ditempatkan berukuran 144 kali 144. viewBox menjelaskan sistem koordinat gambar; width dan height menjelaskan viewport tampilannya. Pertahankan perbedaan tersebut saat menyesuaikan ukuran logo. Tabel prop Svg resmi mendokumentasikan kontrol ini dan preserveAspectRatio.

Periksa PDF tersimpan selain pratinjaunya

Pengujian kami menghasilkan satu halaman A4 dengan cincin persegi hijau kebiruan dekat sudut kiri atas. Kami merender file itu dengan Poppler dan memeriksa secara visual bahwa latar pucat terlihat melalui bukaan. pdfimages -list logo.pdf Poppler melaporkan tidak ada gambar tertanam dalam dokumen terisolasi ini.

Hasil tersebut sengaja dibatasi. Hasil menjelaskan contoh yang hanya berisi path ini. Hasil tidak membuktikan bahwa dokumen dengan foto, gambar SVG tertanam, atau efek yang tidak didukung seluruhnya vektor.

Jika Poppler tersedia di komputer Anda, perintah berikut menyediakan dua pemeriksaan berbeda:

pdfimages -list logo.pdf
pdftoppm -png -singlefile -scale-to 1000 logo.pdf logo-preview

Perintah kedua membuat pratinjau raster untuk pemeriksaan visual; perintah tidak mengubah PDF asli menjadi bitmap. Periksa bukaan, sudut, warna, dan penempatan dalam pratinjau itu, lalu buka PDF tersimpan di penampil yang digunakan penerima. Pratinjau yang tampak tajam saja tidak dapat membuktikan bahwa dokumen asli berisi path: bitmap besar juga dapat terlihat tajam.

Untuk pemeriksaan lebih kuat, periksa instruksi gambar PDF dan objek yang dirujuk di sekitar logo. Laporan kompleks dapat berisi objek bersarang, jadi mulai dengan dokumen logo terisolasi sebelum mendiagnosis seluruh laporan. Panduan SVG PDFKit menjelaskan alur impor SVG terpisah dan pemeriksaan PDF tersimpannya.

Pindahkan karya Anda satu fitur setiap kali

Ganti nilai d contoh dengan data path Anda sendiri, lalu pertahankan fill, aturan isian, stroke, dan transformasi yang terkait. Menyalin hanya bentuk path sambil menghilangkan pewarnaannya dapat mengubah hasil meskipun data path sendiri valid.

Untuk tanda statis kecil, letakkan warna langsung pada bentuk yang didukung. Logo yang bergantung pada stylesheet halaman web memerlukan penyelesaian dependensi tersebut sebelum menjadi komponen dokumen mandiri. Simpan SVG sumber di samping kode rendering agar revisi berikutnya dapat dibandingkan dengan karya yang disetujui.

Ikhtisar SVG resmi mencantumkan primitif yang tersedia. Perlakukan sebagai daftar pemeriksaan dukungan, bukan kumpulan fitur SVG browser yang lengkap. Uji tulisan, pemotongan, dan gradasi dalam versi yang Anda instal sebelum menambahkannya ke laporan produksi.

Jika SVG berisi PNG tertanam, mengonversi wadahnya tidak merekonstruksi geometri yang hilang. Panduan raster tertanam menunjukkan cara membedakan path dari bitmap yang disimpan dalam file SVG.

Ketika logo berasal dari PNG atau JPG

Jika tersedia master SVG, AI, atau vektor lain yang bisa diedit, minta file itu terlebih dahulu. Jika hanya piksel yang tersisa, vektorisasi logo PerfectVector dapat menyiapkan kandidat SVG sebelum pekerjaan React-pdf. Bandingkan kontur, bukaan kecil, dan area warna terpisahnya dengan sumber sebelum mengadaptasi bentuk yang didukung ke komponen PDF Anda.

Vektorisasi tidak memperbaiki integrasi renderer, membuat komponen React, atau menjamin dukungan setiap fitur SVG. Tulisan yang memerlukan geometri merek persis tetap perlu diperiksa manual. Panduan vektorisasi logo membantu memilih antara tracing, mengetik ulang, dan menggambar ulang.

Untuk sumber yang hanya berupa raster, hasil yang berguna adalah kandidat vektor yang diperiksa, diikuti PDF yang diperiksa. Untuk sumber vektor yang sudah ada, lanjutkan langsung ke pemeriksaan komponen dan penempatan. Panduan persiapan sumber tambahan tersedia di blog.

FAQ

Bisakah saya memberikan file SVG ke Image React-pdf? Masukan Image yang didokumentasikan adalah PNG dan JPG. Gunakan primitif Svg renderer untuk alur berbasis path dalam panduan ini, dan periksa versi yang Anda instal sebelum mengandalkan perilaku masukan lain.

Apakah saya harus mengadaptasi setiap SVG secara manual? Tidak. Paket resmi @react-pdf/svg mem-parsing string SVG menjadi pohon node primitif. Tinjau elemen yang didukung dan peringatannya, lalu hubungkan serta uji keluaran itu dalam alur rendering Anda. Contoh komponen eksplisit di sini menghindari tahap parser tambahan.

Mengapa bagian tengah logo saya terisi? Periksa path majemuk dan aturan isiannya. Lambang pengujian memakai evenodd agar persegi dalam tetap terbuka. Pertahankan geometri asli dan aturan pewarnaan sebelum mengubah karya.

Apakah pratinjau PDF yang tajam membuktikan logo berupa vektor? Tidak. Periksa isi dan objek image PDF tersimpan selain tampilannya. Contoh terisolasi dalam panduan ini tidak memiliki gambar tertanam; hasil itu tidak otomatis berlaku untuk logo lain.

Sources

1. React-pdf — Komponen Svg — Mendefinisikan viewport, dimensi, viewBox, dan kontrol rasio aspek.
2. React-pdf — Komponen Image — Mendokumentasikan bentuk masukan PNG dan JPG untuk penempatan bitmap.
3. React-pdf — Primitif SVG — Mencantumkan komponen SVG yang didukung renderer.
4. React-pdf — Parser SVG — Mendokumentasikan pohon node primitif, konversi atribut, dan peringatan elemen yang tidak didukung.

Hanya punya logo PNG atau JPG? Siapkan kandidat SVG dengan PerfectVector, bandingkan kontur dan bukaannya dengan sumber, lalu adaptasi bentuk yang didukung dan periksa PDF tersimpan.