React-pdf SVG logoları: PDF'nizde yolları çizin

@react-pdf/renderer içinde küçük bir SVG logo için çizimi, bu paketin Svg, Path ve diğer desteklenen bileşenleriyle oluşturun. Dıştaki Svg için açıkça bir boyut belirleyin ve kaynağın viewBox değerini koruyun. Görüntü oluşturucunun Image belgeleri PNG ve JPG girdilerini listeler; bir SVG URL'sini Image içine koymak, burada açıklanan vektör yolu değildir.

Bu rehber, ortasında açıklık bulunan kare bir amblemle eksiksiz bir Node örneği kullanır. Sabitlenmiş bağımlılıklarla PDF'yi oluşturduk ve sonucu inceledik. Örnek, kolayca birbirine karıştırılabilen üç şeyi ayrı ele alır: kaynak çizim, bileşen ağacı ve PDF'deki yerleştirme boyutu.

Hangi React PDF paketini kullandığınızı kontrol edin

Bu makale, @react-pdf/renderer ile belge oluşturur. Ayrı bir paket olan react-pdf ise mevcut PDF'leri gösterir. Arama sonucundan bir çözüm kopyalamadan önce dosyanızdaki içe aktarmayı kontrol edin.

Görüntü oluşturucunun Document bileşeni içinde, aynı görüntü oluşturucudan dışa aktarılan bileşenleri kullanın. Tarayıcının küçük harfli svg ve path öğeleri farklı bir görüntü oluşturma ortamına aittir. Resmî SVG bileşen başvurusu, Svg bileşenini görüntü alanı kapsayıcısı olarak tanımlar ve içinde içe aktarılmış React-pdf şekillerini gösterir.

Image başvurusu, raster görüntü girdilerini açıklar. Karmaşık bir görünümü korumak, vektör geometrisini korumaktan daha önemliyse PNG alternatifi yararlı olabilir. Bu, teslim dosyasını değiştirir; dolayısıyla ana vektör kopyasını ayrı tutun.

Resmî bir @react-pdf/svg paketi de vardır. Paketin README dosyası, temel öğe düğümlerinden oluşan bir ağaç döndüren ve öznitelik adlarını camelCase'e dönüştüren parseSvg() işlevini açıklar. Desteklenmeyen öğelerin uyarıyla atlandığını belirtir. Bu, ayrıştırıcının sözleşmesidir; her tarayıcı SVG'sinin aynı şekilde oluşturulacağına dair söz değildir. Aşağıdaki örnek, geometriyi ve boyayı kolayca inceleyebilmek için bileşenleri açıkça kullanır.

Kendi logonuzu içe aktarmadan önce basit bir logo oluşturun

Bu örneği @react-pdf/renderer 4.9.0, React 19.2.4 ve Node 22.19.0 ile çalıştırdık. Bu sürümler test edilen kurulumu belirtir; farklı bir bağımlılık ağacının davranışını garanti etmez.

Yeni bir dizinde iki çalışma zamanı paketini yükleyin:

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

Bunu logo.mjs olarak kaydedin, ardından node logo.mjs komutunu çalıştırın. Node'un JSX derleme adımı olmadan çalıştırabilmesi için React.createElement kullanır.

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

Dış ve iç kareler tek bir bileşik yolu paylaşır. fillRule: 'evenodd', iç kareyi açık bırakır ve alttaki açık renkli dikdörtgeni gösterir. Ortayı kapatan beyaz bir yama yoktur. Bu nedenle örneği harf içi boşlukları veya kesilmiş alanları olan bir logoyla değiştirdiğinizde açıklık yararlı bir kontrol sunar.

SVG koordinatları her yönde 100 birimlik alanı kapsarken yerleştirilen görüntü alanı 144 × 144'tür. viewBox, çizimin koordinat sistemini; width ve height ise gösterilen görüntü alanını tanımlar. Logonun boyutunu ayarlarken bu ayrımı koruyun. Resmî Svg props tablosu, bu kontrolleri ve preserveAspectRatio özelliğini açıklar.

Önizlemenin yanında kaydedilen PDF'yi de inceleyin

Testimiz, sol üst köşeye yakın mavi-yeşil kare halkası bulunan tek bir A4 sayfası üretti. Dosyayı Poppler ile görüntüye dönüştürdük ve açık renkli arka planın açıklıktan göründüğünü gözle kontrol ettik. Poppler'ın pdfimages -list logo.pdf komutu, bu bağımsız belgede gömülü görsel olmadığını bildirdi.

Bu sonuç bilinçli olarak dar kapsamlıdır. Yalnızca yollar içeren bu test örneğini açıklar. Fotoğraflar, gömülü SVG görselleri veya desteklenmeyen efektler içeren bir belgenin tamamen vektör olduğunu kanıtlamaz.

Makinenizde Poppler varsa şu komutlar iki farklı kontrol sağlar:

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

İkinci komut, görsel inceleme için raster önizleme oluşturur; özgün PDF'yi raster görüntüye dönüştürmez. Bu önizlemede açıklığı, köşeleri, renkleri ve yerleşimi kontrol edin; ardından kaydedilen PDF'yi alıcınızın kullandığı görüntüleyicide açın. Yalnızca net görünen bir önizleme, özgün belgenin yollar içerdiğini kanıtlayamaz: büyük bir raster görüntü de net görünebilir.

Daha güçlü bir inceleme için PDF'nin çizim talimatlarını ve logonun çevresindeki referans verilen nesneleri inceleyin. Karmaşık raporlar iç içe nesneler içerebilir; bu nedenle tüm raporu teşhis etmeden önce yalnızca logo içeren bağımsız bir belgeyle başlayın. PDFKit SVG rehberi, ayrı bir SVG içe aktarma iş akışını ve kaydedilen PDF kontrollerini açıklar.

Çiziminizi özellikleri tek tek aktararak taşıyın

Test örneğinin d değerini kendi yol verilerinizle değiştirin; ardından ilgili dolguyu, dolgu kuralını, konturu ve dönüşümü koruyun. Yol verisi geçerli olsa bile yalnızca yolun şeklini kopyalayıp boyasını bırakmak sonucu değiştirebilir.

Küçük ve statik bir işaret için renkleri doğrudan desteklenen şekillere koyun. Web sayfasının stil sayfasına dayanan bir logonun, tek başına çalışabilen bir belge bileşenine dönüşmeden önce bu bağımlılıklarının giderilmesi gerekir. Sonraki değişikliklerin onaylı çizimle karşılaştırılabilmesi için kaynak SVG'yi görüntü oluşturma kodunun yanında tutun.

Resmî SVG genel bakışı, mevcut temel öğeleri listeler. Bunu tarayıcının eksiksiz SVG özellikleri kümesi olarak değil, destek kontrol listesi olarak değerlendirin. Yazıları, kırpmayı ve gradyanları üretim raporuna eklemeden önce yüklü sürümünüzde test edin.

SVG gömülü bir PNG içeriyorsa kapsayıcısını uyarlamak, eksik geometriyi yeniden oluşturmaz. Gömülü raster rehberi, yolları SVG dosyasında saklanan bir raster görüntüden nasıl ayıracağınızı gösterir.

Logo PNG veya JPG olarak başlıyorsa

Özgün SVG, AI veya başka bir düzenlenebilir ana vektör dosyası varsa önce onu isteyin. Yalnızca pikseller kaldıysa PerfectVector'ın logo vektörleştirme aracı, React-pdf çalışmasından önce bir SVG adayı hazırlayabilir. Desteklenen şekillerini PDF bileşeninize uyarlamadan önce konturlarını, küçük açıklıklarını ve ayrı renk alanlarını kaynakla karşılaştırın.

Vektörleştirme; görüntü oluşturucu entegrasyonunu onarmaz, React bileşeni oluşturmaz veya her SVG özelliği için destek garantisi vermez. Markanın geometrisini birebir koruması gereken yazıları elle incelemeye tabi tutun. Logo vektörleştirme rehberi, vektörleştirme, yeniden yazma ve yeniden çizme arasında seçim yapmanıza yardımcı olur.

Yalnızca raster kaynağınız varsa yararlı sonuç, incelenmiş bir vektör adayının ardından kontrol edilmiş bir PDF'dir. Mevcut bir vektör kaynağı için doğrudan bileşen ve yerleştirme kontrollerine geçin. Kaynak hazırlama konusunda daha fazla rehber blogda bulunabilir.

Sık sorulan sorular

React-pdf Image bileşenine SVG dosyası verebilir miyim? Belgelenmiş Image girdileri PNG ve JPG'dir. Bu rehberdeki yol tabanlı iş akışı için görüntü oluşturucunun Svg temel öğelerini kullanın ve diğer girdi davranışlarına güvenmeden önce yüklü sürümünüzü kontrol edin.

Her SVG'yi elle uyarlamam gerekiyor mu? Hayır. Resmî @react-pdf/svg paketi, SVG dizelerini temel öğe düğümlerinden oluşan ağaçlara ayrıştırır. Desteklediği öğeleri ve uyarılarını inceleyin, ardından bu çıktıyı görüntü oluşturma iş akışınıza bağlayıp test edin. Burada bileşenlerin açıkça tanımlandığı örnek, ek ayrıştırıcı adımını ortadan kaldırır.

Logomun ortası neden doluyor? Bileşik yolu ve dolgu kuralını kontrol edin. Test amblemi, iç karesinin açık kalması için evenodd kullanır. Çizimi değiştirmeden önce özgün geometriyi ve boya kurallarını koruyun.

Net bir PDF önizlemesi, logonun vektör olduğunu kanıtlar mı? Hayır. Kaydedilen PDF'nin görünümünün yanında içeriğini ve görsel nesnelerini de inceleyin. Bu rehberdeki bağımsız test örneğinde gömülü görsel yoktu; bu sonuç başka bir logo için kendiliğinden geçerli değildir.

Kaynaklar

1. React-pdf — Svg component — Görüntü alanını, boyutları, viewBox değerini ve en-boy oranı kontrollerini tanımlar.
2. React-pdf — Image component — Raster görüntü yerleştirme için PNG ve JPG girdi biçimlerini açıklar.
3. React-pdf — SVG primitives — Görüntü oluşturucunun desteklediği SVG bileşenlerini listeler.
4. React-pdf — SVG parser — Temel öğe düğüm ağacını, öznitelik dönüşümünü ve desteklenmeyen öğe uyarılarını açıklar.

Elinizde yalnızca PNG veya JPG logo mu var? PerfectVector ile bir SVG adayı hazırlayın, konturlarını ve açıklıklarını kaynakla karşılaştırın; ardından desteklenen şekilleri uyarlayın ve kaydedilen PDF'yi inceleyin.