jsPDF SVG: Tarayıcıda üretilen PDF’de logo yollarını koruyun

SVG logo yollarını jsPDF ile tarayıcıda oluşturulan bir PDF’ye eklemek için svg2pdf.js yükleyin, await doc.svg(...) çağrısına bir SVG öğesi verin ve ardından belgeyi kaydedin. addSvgAsImage yöntemini yalnızca raster bir görüntü kabul edilebilirse seçin. Girdisinin SVG olması, ortaya çıkan PDF’nin SVG yolları içerdiği anlamına gelmez.

svg2pdf.js kullanım örneği, öğe tabanlı ve eşzamansız çağrıyı belgeler. jsPDF’nin SVG modülü kaynak kodu diğer yöntemi gösterir: bir canvas üzerine çizin, JPEG olarak kodlayın ve bu görseli PDF’ye ekleyin.

Fatura, bilet veya rapor logosu için özgün SVG’yi düzenlenebilir ana dosyanız olarak saklayın. Bu rehber basit, iki renkli bir amblemi test eder, yerleşimini PDF punto birimiyle ayarlar ve kaydedilen nesneleri kontrol eder. Her SVG özelliğinin dönüşüm sırasında korunacağını varsaymaz.

İhtiyacınız olan çıktıyı seçin

Üçüncü yöntem, JavaScript ile bir araya getirilmiş bir belge yerine önceden hazırlanmış bir logo PDF’sine ihtiyaç duyduğunuzda faydalıdır. Tarayıcı dışındaki belge iş akışları için LaTeX’te SVG rehberi, ayrı bir dışa aktarma ve belgeye dahil etme sürecini açıklar. Node tabanlı bir belge hattı için PDFKit SVG örneği, belgenin tamamını eklemekle tek bir yolu ayrıştırmak arasındaki farkı gösterir.

Teslim edilecek dosya bir sunumsa PptxGenJS SVG görsel rehberini kullanın. Bu rehber, farklı bir belge biçimine PDF dışa aktarma ayarlarını uygulamak yerine logonun en-boy oranını, dışa aktarılan PPTX’in medya dosyalarını ve sunum uygulamasındaki görünümünü kontrol eder.

Önce sürümleri sabitlenmiş küçük bir örnek çalıştırın

Örnek, bir tarayıcıda jsPDF 4.2.1 ve svg2pdf.js 2.8.1 ile çalıştırıldı. Bunlar test edilen sürümlerdir; gelecekteki sürümler için bir garanti değildir. Paketin adı, son eki dahil svg2pdf.js şeklindedir; benzer adları olan paketler farklı iş akışlarına hizmet edebilir.

JavaScript paketleyicisi kullanan küçük bir tarayıcı projesinde şunları yükleyin:

npm install jspdf@4.2.1 svg2pdf.js@2.8.1

Girdi olarak bu özgün amblemi kullanın. Halkasının içinde, tek-çift dolgu kuralıyla oluşan gerçek bir açıklık vardır. İkinci yol, yuvarlatılmış bir tepedir. Yazı tipi, bağlantılı dosya, filtre veya gömülü raster görüntü içermez.

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

Bunu doğrudan bir Node.js betiğinde değil, tarayıcıda çalıştırın. Kütüphanenin kullanım ve kapsam notları, çalışan bir tarayıcı DOM’u gerektirir ve SVG desteğinin sınırlı olduğunu açıklar. Sunucuda oluşturulan bir uygulamada bu işlemi istemci tarafındaki dışa aktarma işleyicisine yerleştirin.

Buradaki dize, güvenilir ve sabit bir görseldir. Uygulamanız rastgele SVG yüklemelerini kabul ediyorsa yalnızca XML ayrıştırmak, içeriği güvenli hâle getirmek değildir. Bir yükleme iş akışı oluşturmadan önce kullanıcı tarafından sağlanan SVG’yi güvenli hâle getirmek ve çalıştırılmasını yalıtmak için kütüphanenin yönergelerini izleyin.

Yerleşimi viewBox’tan ayrı ayarlayın

Bu örnekte unit: 'pt', PDF ölçülerini punto olarak belirler. Sayfa 300 × 220 puntodur; görselin görüntüleme alanı soldan ve üstten 30 punto uzaklıkta başlar ve 240 × 160 punto yer kaplar. jsPDF’nin kurucu belgeleri belgenin birim, biçim ve yön seçeneklerini açıklar.

SVG’nin viewBox="0 0 240 160" özelliği, iç koordinatlarını tanımlar. PDF sayfa boyutu değildir. Hedef genişliği ve yüksekliği aynı 3:2 oranında tutmak, amaçlanan sığdırmayı kontrol etmeyi kolaylaştırır. Yerleştirilen görseli yarıya küçültmek için width: 120, height: 80 kullanın; kaynak yol koordinatları aynı kalabilir.

PDF konumundaki sorunu araştırmadan önce dışa aktarılan SVG’ye açıkça tanımlanmış boyutlar ve uygun bir viewBox verin. Beklenmedik ölçüde büyük bir boş kenarlık, SVG tuvaline ait olabilir. x ve y değerlerini değiştirmek, boş alan dahil tüm SVG görüntüleme alanını taşır.

Kaydedilen iki PDF’yi de inceleyin

Karşılaştırma için aynı tarayıcı çalıştırmasında, özellikle rasterleştirilmiş şu sürüm de oluşturuldu:

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

Testte bu yöntem için jsPDF’nin kurulu canvg bağımlılığının 3.0.11 sürümü kullanıldı. Her iki PDF kaydedildi, yeniden açıldı ve aynı ölçekte çizildi. PyMuPDF’nin çizim ve görsel inceleme yöntemleri şu sonuçları bildirdi:

Vektör dosyasının içerik akışında eğri komutları ve halka için tek-çift dolgusu bulunuyordu. Raster dosyası ise bir görsel nesnesi yerleştirdi. Bu sayılar, bu küçük test örneğini tanımlar; daha karmaşık bir SVG farklı nesneler üretebilir veya kendi içinde raster içerik barındırabilir.

Siyah dikdörtgen, halkanın önceden saydam olan açıklığı dahil bu raster dışa aktarımda gözlenen bir sonuçtur. JPEG alfa saydamlığını korumaz; SVG’nin saydam bölgelerinin bu yöntemde korunacağını varsaymayın. Özellikle logo renkli bir belge paneline yerleştirilecekse gerçekten ihtiyaç duyduğunuz arka planı kontrol edin.

Yalnızca yakınlaştırmak yeterli kanıt değildir. Her PDF görüntüleyicisi sonuçta ekranınıza piksel çizer. PDF’nin nesnelerini inceleyin ve kaydedilen görünümü SVG ana dosyasıyla karşılaştırın. Poppler’ın pdfimages -list logo-raster.pdf gibi bir komutu gömülü görselleri listeleyebilir. Tek başına boş bir görsel listesi, amaçlanan şekillerin doğru dışa aktarıldığını kanıtlamaz: sayfa boş olabilir. Çizim içeriğini ve görünümünü de kontrol edin.

Dışa aktarımın sorunlu kısmını düzeltin

Bir SVG zaten bir raster görüntü içeriyor olabilir. Bu dosyayı vektör destekleyen bir dışa aktarıcıdan geçirmek, piksellerini düzenlenebilir konturlara dönüştürmez. PDF ayarlarını değiştirmeden önce gömülü raster görüntü inceleme rehberini kullanın.

Bu test, metin yerleşimini, filtreleri, harici görselleri veya her türlü CSS kullanımını kapsamaz. svg2pdf.js kapsamını açıkça SVG’nin bir alt kümesiyle sınırlar. Yazılar için dönüşümden önce yazı tipi ayarlama yönergelerini izleyin veya bu tercih uygunsa tasarım kaynağında yazıları konturlara dönüştürün. İleride metin değişiklikleri önemliyse metni düzenlenebilir hâlde tutan bir ana dosya saklayın.

Logo kaynağını PerfectVector ile hazırlayın

Logo zaten temiz bir vektör görseliyse o kaynağı kullanın. Elinizde yalnızca PNG veya JPG kaldıysa PerfectVector, PDF adımından önce düzenlenebilir şekilleri geri kazanmanıza yardımcı olabilir. Logoyu vektörleştirin, ardından bir SVG düzenleyicisinde dış konturunu, küçük açıklıklarını ve ayrı renklerini inceleyin. Logo hazırlama rehberi, bu incelemeyi daha ayrıntılı ele alır.

PerfectVector raster görüntüyü bu iş akışı için hazırlar; jsPDF’ye SVG desteği eklemez veya bir dışa aktarıcının desteklemediği özellikleri düzeltmez. Geri kazanılan yolları özgün görselinizle karşılaştırın, gereken ayrıntıları sadeleştirin veya yeniden çizin, ardından PDF kontrolünü tekrar çalıştırın. Vektörleştirme ihtiyaç duyduğunuz ayrıntıları kaybettirecekse fotoğrafı görsel olarak koruyun. Daha kapsamlı görsel vektörleştirme rehberi, bu kaynak seçimini açıklar.

Sık sorulan sorular

addSvgAsImage, SVG’mi vektör yolları olarak korur mu? Hayır. Test edilen jsPDF 4.2.1 uygulaması, SVG’yi bir canvas üzerine çizer ve JPEG olarak gömer. Desteklediği geometrinin PDF çizim içeriğine dönüştürülmesi gerektiğinde svg2pdf.js ile doc.svg kullanın.

doc.svg bir SVG dosya adı kabul eder mi? Gösterilen API bir SVG DOM öğesi alır. Önce güvenilir bir dosyayı yükleyip ayrıştırın veya mevcut bir SVG öğesini seçin, ardından bu öğeyi doc.svg çağrısına verin ve sonucu bekleyin.

Her SVG, PDF’de aynı görünür mü? Hayır. svg2pdf.js SVG’nin sınırlı bir kısmını destekler. Yazı tipleri, görselleri, efektleri, boyutları ve arka planları dahil gerçek görselinizi test edin ve kullanmadan önce kaydedilen PDF’yi yeniden açın.

Kaynaklar

1. yWorks — svg2pdf.js usage and scope — SVG öğesi API’si, eşzamansız dönüşüm, yazı tipi ayarları, tarayıcı gereksinimleri ve destek kapsamının sınırlamaları.
2. jsPDF — SVG module at version 4.2.1 — addSvgAsImage tarafından kullanılan canvas ve JPEG uygulaması.
3. jsPDF — Constructor reference — PDF belge birimleri, sayfa biçimi ve yön seçenekleri.
4. PyMuPDF — Page inspection — Kaydedilen test dosyalarını incelemek için kullanılan çizim ve görsel inceleme yöntemleri.

Elinizde yalnızca raster bir logo mu var? Logonuzdan düzenlenebilir bir SVG hazırlayın, konturlarını ve açıklıklarını kontrol edin, ardından seçtiğiniz PDF yöntemiyle dışa aktarın ve kaydedilen nesneleri ve arka planı inceleyin.