PDFKit SVG: Vektör logoyu rasterleştirmeden yerleştirin

Tam bir SVG logoyu Node ile oluşturulan PDF'ye yerleştirmek için PDFKit ile birlikte svg-to-pdfkit kullanın ve SVG işaretlemesini SVGtoPDF(doc, svg, x, y, options) çağrısına geçirin. PDFKit'in yerleşik doc.path() yöntemi, bir yolun d özniteliğinin değeri gibi SVG yol verilerini kabul eder. Yolu çevreleyen SVG belgesini, diğer şekillerini veya stillerini içe aktarmaz.

Bu ayrım, birkaç renge ve merkezinde bir açıklığa sahip logolarda önemlidir. Tek bir yolu kopyalamak, çizimin bir kısmının dışarıda kalmasına yol açabilir. Logonun tamamını PNG'ye dönüştürmek raster görünümünü korur, ancak elde etmek istediğiniz yol tabanlı PDF çıktısından vazgeçmeniz anlamına gelir.

Bu rehberde özgün bir amblem, eksiksiz bir Node betiği ve kaydedilen PDF'nin incelenmesi kullanılıyor. Zaten düzenlenebilir bir vektör logonuz varsa onu kaynak olarak koruyun. Raster kaynaktan vektör elde etme işlemi, bu içe aktarma adımından önce yapılmalıdır.

Tam SVG ekleme veya tek yol kullanma seçeneğini belirleyin

PDFKit'in vektör grafikleri belgesi, yol ayrıştırıcısını ve ilgili çizim yöntemlerini açıklar. Ayrı bir kütüphane olan SVG-to-PDFKit, tam SVG işaretlemesini işler.

PDFKit görüntü belgesi, doc.image() için PNG ve JPEG biçimlerini listeler. Bu çağrıyı tam bir SVG içe aktarma aracı olarak değerlendirmeyin.

Örneğin yol API'sinin şu kullanımı geçerlidir:

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

Bu kod, amblemimizin üçgenini kendi yol koordinatlarında çizer. Kaynak dosyanın başka bir bölümündeki turkuaz halkayı veya çubuğu getirmez. Bu parçalar birlikte kullanılacaksa aşağıdaki tam belge yöntemini izleyin.

PDF'niz tarayıcıda jsPDF ile oluşturuluyorsa ayrı jsPDF SVG iş akışını izleyin. React bileşenleriyle oluşturulan bir belge için React-pdf SVG logo iş akışını kullanın. Python belgeleri için ReportLab içe aktarma ve boyutlandırma kontrollerini, fpdf2 ile doğrudan SVG yerleştirmeyle karşılaştırın.

Sabitlenmiş paket sürümleriyle küçük bir örnek çalıştırın

Bu örneği PDFKit 0.20.2 ve SVG-to-PDFKit 0.1.8 ile çalıştırdık. Bunlar test edilen bağımlılık çiftini belirtir; paketlerden herhangi birini yükselttikten sonra kendi çıktınızı kontrol edin.

Yeni bir Node projesinde şunları yükleyin:

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

Bunu logo.svg adıyla kaydedin. Halka ve açıklığı, fill-rule="evenodd" kullanan tek bir yolu paylaşır; altın renkli üçgen ve turkuaz çubuk ayrı şekillerdir. Dosyada yazı tipi, görüntü veya efekt yoktur.

<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>

Aşağıdaki kodu aynı dizinde place-logo.cjs adıyla kaydedin, ardından node place-logo.cjs komutunu çalıştırın:

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 bir akış üretir. doc.end() çağrısı belgeyi sonlandırır; betik daha sonra dönmeden önce çıktı akışının bitmesini bekler. Başlangıç belgesi, akış modelini ve inç başına 72 punto olacak şekilde PDF puntosuyla ifade edilen sayfa ölçülerini açıklar.

Burada iki yerleştirme görünüm alanı 180 × 90 pt ve 90 × 45 pt, yani 2.5 × 1.25 inç ve 1.25 × 0.625 inç boyutundadır. İkisi de kaynak viewBox'ın 2:1 oranıyla eşleşir. Çizilen şekillerin bu viewBox içinde kenar boşlukları vardır; dolayısıyla görünür sınırları görünüm alanından küçüktür. Logoyu yakınındaki metinle hizalarken tuvali ve boyanan çizimi ayrı ayrı ölçün.

İçe aktarma aracı, width ve height seçeneklerini başlangıç görünüm alanı olarak belgeler. preserveAspectRatio seçeneği, bu alana sığdırmayı kontrol eder. Bu örnek, sayfa boyutundaki varsayılan değere bağlı kalmamak için eşleşen oranlar ve açıkça belirtilmiş ölçüler kullanır. Beklenmedik biçimde küçük görünen bir logo için assumePt seçeneğini genel bir çözüm olarak kullanmayın; önce kaynak ölçülerini, viewBox'ı ve hedef görünüm alanını kontrol edin.

Önce PDF'yi, ardından görünümünü inceleyin

Minimal logo.pdf dosyamızda 800 × 450 pt boyutunda tek bir sayfa vardı. pypdf 6.10.0 ile 24 kübik eğri işlemi, iki tek-çift dolgu işlemi ve sıfır sayfa görüntüsü bulduk. Sayfa kaynakları yazı tipi veya XObject içermiyordu. İçe aktarma aracı bu test örneği için hiçbir uyarı vermedi.

Bu sonuçlar sınırlı bir çıkarımı destekler: görüntü içermeyen bu özgün amblem, test edilen sürümlerde PDF geometrisiyle çizildi. Herhangi bir SVG'nin tamamen vektör PDF'ye dönüşeceğini göstermezler. Gömülü fotoğraf içeren bir logo ayrıca incelenmelidir.

Etiketli bir sürümü de Poppler ile görüntüledik. Aynı SVG'yi ve iki görünüm alanı boyutunu kullanır; yerleşimler karşılaştırma panellerine taşınmıştır. Açık renkli panel arka planı iki halkanın içinden de görünür kalır; üçgen ve dar çubuk halkadan ayrı kalır.

Yalnızca yakınlaştırmada net görünmesi zayıf bir kanıttır: yeterince büyük bir bitmap de keskin görünebilir. Tersine, bir raporun herhangi bir yerinde eğri işlemi bulmak, logosunun rasterleştirilip rasterleştirilmediği hakkında hiçbir şey söylemez. Fotoğraf ve grafikler de içeren bir belgeyi incelemeden önce çizimi küçük bir test PDF'sinde tek başına ele alın.

Kendi logonuz için iki kontrolü de yapın:

1. Bir PDF inceleme aracıyla PDF'nin sayfa içeriğini ve başvurulan nesnelerini inceleyin. Logonun boyandığı yerde çizim talimatlarını arayın ve tüm görüntü nesnelerini hesaba katın. Daha karmaşık PDF'ler içeriği Form XObject'lerin içine yerleştirebilir; bu nedenle üst düzeydeki bir sayım her zaman yeterli değildir.
2. Kaydedilen PDF'yi kullanılacağı görüntüleyicide açıp kaynakla karşılaştırın. Deliği, ayrı renkleri, kırpmayı, kenar boşluklarını ve ince ayrıntıları gerçek teslim boyutunda kontrol edin.

Özgün SVG'yi PDF oluşturma kodunun yanında tutun. Kaynak yalnızca pikselleri bir SVG içine sarıyorsa SVG uzantısının geometri hakkında bir şey kanıtladığını varsaymadan önce gömülü görüntü teşhisini kullanın.

Yazı tiplerini ve efektleri test edilmiş iş akışı içinde tutun

SVG-to-PDFKit, filtreleri ve foreignObject öğesini desteklemediği özellikler arasında listeler. Yazı tipi kaydı ve geri çağırım gereksinimlerini de belgeler. Sunucu tarafında işlenen küçük bir logo için açık SVG sunum öznitelikleri kullanın ve uyarıları görüntülenen sonuçla birlikte değerlendirin. Tarayıcının hesapladığı CSS, sağlanan bir SVG öğesi için ayrı bir seçenektir; bu Node betiğine işaretleme geçirmekle aynı değildir. Kütüphanenin özellikler ve yazı tipleri belgesine bakın.

Amblemimiz özellikle metin içermiyor. Gerçek yazılar için ya amaçlanan yazı tiplerini sağlayıp test edin ya da vektör ana dosyasında onaylanmış, konturlara dönüştürülmüş yazıyı koruyun. PDFKit'in yazı tipi belgesi, yazı tipi gömmeyi ve kaydetmeyi açıklar. Belge metniyle logo konturlarının düzenleme ihtiyaçları farklıdır; yazının ekran görüntüsünü izlemek özgün yazı tipini belirlemez.

Bir marka simgesi, bu içe aktarma aracının yeniden üretemediği bir efekte bağlıysa efekti uygun geometri olarak yeniden oluşturun veya başka bir dışa aktarma iş akışı seçip doğrulayın. Görünüm, yolları korumaktan daha önemli olduğunda raster ekleme de geçerli bir seçenektir. Bu seçimi vektörü koruyan bir dışa aktarma olarak tanımlamayın.

Örnekte RGB renkleri kullanılıyor. Yalnızca yolların korunması, bir matbaanın renk, PDF/X veya baskı öncesi hazırlık gereksinimlerinin karşılandığını göstermez. Bunları alıcıyla doğrulayın; logo dosya biçimleri rehberi, düzenlenebilir ana dosyayla teslim dosyasını ayırmanıza yardımcı olur.

Yalnızca raster olarak bulunan logoyu eklemeden önce vektöre dönüştürün

Özgün logo yalnızca PNG veya JPG olarak mevcutsa PerfectVector'ın logo vektörleştirme aracı, PDFKit adımından önce bir SVG adayı hazırlayabilir. Konturları, küçük açıklıkları ve ayrı renk bölgelerini kaynakla karşılaştırın; ardından bu adayı aynı yerleştirme ve PDF kontrollerinden geçirin.

Özgün vektör mevcut olduğunda onu kullanın. Bozulmuş yazılar veya markanın birebir geometrisi için etkilenen kısmı bir editörde yeniden yazın ya da çizin. Logo vektörleştirme rehberi, kaynak seçimine ilişkin bu kararı açıklar. PerfectVector çizim yollarını hazırlar; PDFKit ve içe aktarma aracı, belgeye yerleştirme işlemini yapar. Bu makaledeki test amblemi, elle oluşturulmuş bir vektör çizimidir; ölçülmüş bir dönüştürme sonucu değildir.

Sık sorulan sorular

PDFKit, doc.path() ile tam bir SVG'yi içe aktarabilir mi? Hayır. Yol yöntemi SVG yol verilerini okur. Bu iş akışında tam belge için SVG-to-PDFKit kullanın veya her şekli kendiniz çizip biçimlendirin.

SVG-to-PDFKit, raster görüntü içermeyen bir PDF'yi garanti eder mi? Hayır. Test edilen, görüntü içermeyen amblem çizim işlemleri üretti ve sayfa görüntüsü sayısı sıfırdı. Özellikle SVG gömülü görüntüler veya içe aktarma aracının desteklediği kümenin dışındaki özellikler içeriyorsa kendi girdinizi ve dışa aktarılan PDF'yi inceleyin.

Görünen logo neden belirttiğim genişlik ve yükseklikten daha küçük? Bu seçenekler içe aktarma görünüm alanını tanımlar. Kaynak viewBox içindeki boş alan yerleşimin parçası olarak kalır; en boy oranını koruyarak sığdırma da ek boşluk bırakabilir. İstenen PDF boyutunu değiştirmeden önce çizimin sınırlarını kontrol edin.

Kaynaklar

1. PDFKit — Vector graphics — SVG yol verilerinin ayrıştırılmasını, boyama işlemlerini ve grafik durumunu belgeler.
2. SVG-to-PDFKit — Usage and limitations — Tam SVG eklemeyi, görünüm alanı seçeneklerini, uyarıları, yazı tiplerini ve desteklenen özellikleri tanımlar.
3. PDFKit — Images — Görüntü API'sinin kabul ettiği bitmap biçimlerini listeler.
4. PDFKit — Getting started — Belge akışlarını, sonlandırmayı ve PDF puntosuyla sayfa boyutlandırmayı açıklar.
5. PDFKit — Fonts — Yazı tipi gömmeyi ve adlandırılmış yazı tipi kaydını açıklar.

Belgenizin logosu raster görüntüyle başlıyorsa PerfectVector ile bir SVG adayı hazırlayın, açıklıklarını ve konturlarını inceleyin; ardından gerekli PDF boyutunda yerleştirip kaydedilen dosyayı kontrol edin.