Satori SVG Logoları: Çizimi Markalı Kartta Koruyun

Satori kartına SVG logo yerleştirmek için onu görsel kaynağı olarak aktarın, görsel genişliği ve yüksekliğini ayarlayın ve özgün SVG'yi üretilen kartın yanında koruyun. Aşağıdaki örnekte base64 SVG, Satori çıktısında iç içe bir görsele dönüşür. Dış kartta yeni, düzenlenebilir logo yolları koleksiyonuna dönüşmez.

Satori sınırlı HTML ve CSS kümesinden SVG oluşturur. Resmî görsel rehberi, sonraki işleyici PNG üretecekse açık boyutlar ve bağımsız görsel verisi önerir. Böylece işin iki ayrı çıktısı olur: birleştirilmiş SVG kartı ve raster teslim kopyası.

Farklı görevleri olan üç dosyayı koruyun

SVG <image>, MDN image başvurusunun açıkladığı gibi başka bir SVG'ye başvurabilir. Dolayısıyla image öğesi, gömülü çizimin otomatik olarak raster olduğu anlamına gelmez. Kartı daha geniş SVG raster görsel kontrol listesiyle tanılamadan önce veri türünü ve çözülmüş içeriğini inceleyin.

Ana dosyayı kartın yanında tutun

Eksiksiz yerel örnek

Bu başlangıç, Satori 0.35.0 sürümünün standart SVG çıktı içe aktarımını ve resvg-js 2.6.2 kullanır. Boş çalışma klasöründe sabitlenmiş paketleri kurun:

npm install --save-exact satori@0.35.0 @resvg/resvg-js@2.6.2

fonts klasörü oluşturup Google Fonts Abel dizininden Abel-Regular.ttf ve OFL.txt indirin. Abel, SIL Open Font License 1.1 ile lisanslanır; yazı tipini bu örnekle dağıtırken eşlik eden bildirimi ve lisansı koruyun.

Aşağıdakini starter.mjs olarak kaydedip node starter.mjs çalıştırın. Yazı tipini Satori'ye sağlar, delikli eşkenar dörtgen oluşturur ve 80×80 ile 160×160 çizim kutuları içeren iki 600×320 kart üretir. Dosya URL'leri yazı tipi ve çıktı yollarını betiğe göreli tutar.

import { readFile, writeFile } from 'node:fs/promises';
import satori from 'satori';
import { Resvg } from '@resvg/resvg-js';
 
const logo = `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><path d="M64 8 L120 64 L64 120 L8 64 Z M64 42 L86 64 L64 86 L42 64 Z" fill="#176b5b" fill-rule="evenodd"/></svg>`;
const src = `data:image/svg+xml;base64,${Buffer.from(logo).toString('base64')}`;
const font = await readFile(new URL('./fonts/Abel-Regular.ttf', import.meta.url));
await writeFile(new URL('./logo-master.svg', import.meta.url), logo);
 
for (const size of [80, 160]) {
  const svg = await satori({
    type: 'div',
    props: {
      style: { display: 'flex', width: 600, height: 320,
        backgroundColor: '#f6f2e8', color: '#152e29', fontFamily: 'Abel' },
      children: [
        { type: 'img', props: { src, width: size, height: size,
          style: { position: 'absolute', left: 24, top: 64 } } },
        { type: 'div', props: {
          style: { position: 'absolute', left: 220, top: 112, fontSize: 42 },
          children: 'CEDAR FIELD' } },
        { type: 'div', props: {
          style: { position: 'absolute', left: 220, top: 168, fontSize: 20 },
          children: 'A study in simple shapes' } },
      ],
    },
  }, {
    width: 600, height: 320,
    fonts: [{ name: 'Abel', data: font, weight: 400, style: 'normal' }],
  });
  const png = new Resvg(svg, { font: { loadSystemFonts: false } }).render().asPng();
  await writeFile(new URL(`./card-${size}.svg`, import.meta.url), svg);
  await writeFile(new URL(`./card-${size}.png`, import.meta.url), png);
}

Buffer.from(logo).toString('base64'), oluşturulmuş UTF-8 SVG baytlarını Node Buffer kodlama API'siyle kodlar. data:image/svg+xml;base64, öneki içeriği tanımlar. Logo geometrisini değil, aktarım temsilini değiştirir.

Satori çağrısı kart SVG'sini döndürür. Sonraki satır bu SVG'yi ayrı resvg-js PNG işleyicisine verir. Başlangıçta uzak görsel URL'si yoktur; işlemeye başlamadan önce yerel yazı tipini okur. Kendi uzak kaynak getirme veya dağıtım davranışınızı ayrı sınayın.

İki gerçek çağrı ne üretti?

Bu başlangıcı sabitlenmiş paketlerle aynen çalıştırdık, iki çıktı SVG'sini inceledik ve her SVG ile PNG'yi tarayıcıda açtık. Dört kart dosyası da 600×320 olarak yüklendi. Amblem kutusu iki kat büyürken yazılar aynı konumda kaldı.

Her kart bir dış <image> ve iki dış <path> öğesi içeriyordu. İki yol yazıları temsil ediyordu; eşkenar dörtgenin dış ve iç konturları değildi. Görselin base64 verisini çözmek tam özgün SVG baytlarını geri getirdi: bir yol, sıfır image öğesi ve aynı delikli eşkenar dörtgen tanımı. Bu çalıştırmada kartta canlı <text> öğesi yoktu.

Boyama sınırı satırları, amblemin tam düz koyu turkuaz rengiyle eşleşen pikselleri sayar. Kenar yumuşatılmış kenarları dışlar. Görsel dikdörtgeninin boyutları değildir: özgün eşkenar dörtgen 8 ile 120 kaynak koordinatları arasında uzandığından matematiksel kapsamı bu kutularda 70 veya 140 birime ölçeklenirdi. Ölçülen düz renk sınırları biraz daha küçüktü.

Özgün amblemin merkezi, tek başına işlendiğinde 0 alfayla saydamdı. Her son kart PNG'sinde açıklık opak krem arka planı gösterdi: RGBA 246,242,232,255. Görünür açıklık ve saydam son kart pikseli farklı gereksinimlerdir. Saydam teslim arka planı gerekiyorsa kart arka planını değiştirin ve oluşan alfayı ayrı inceleyin.

Bunlar tek özgün amblemi iki boyutta kullanan iki çağrıdır. Her SVG özelliğinin çalıştığını, yinelenen uzak görsel işlerinin düzeldiğini veya tüm hedeflerin kartı özdeş işlediğini kanıtlamaz.

Kaynağı kaybetmeden çizim kutusunu değiştirin

Kendi logonuz için logo dizgesini bağımsız SVG ile değiştirin veya kodlamadan önce ana dosyanızı okuyun. Önce viewBox, genişlik, yükseklik ve açıklığını kontrol edin. Bu sınırlar içindeki ek boşluk, görünür logoyu atanan kart kutusundan küçük gösterebilir.

İki görsel boyutunu da amaçlanan en boy oranına göre ayarlayın. Kaynağımız kare, iki kutu da karedir; çıktı görseli preserveAspectRatio="none" kullanıyordu ve bu burada oran değişikliğine neden olmadı. Bu test, kare yuvaya zorlanan dikdörtgen logoyu sınamaz. Her seferinde tek düzen değişkeni değiştirin, ardından gerçek SVG'yi ve teslim PNG'sini inceleyin.

Bağımsız değiştirmek istediğiniz yazıları gömülü logonun dışında tutun. Bu örneğin kart metni teslim edilen SVG'de yollara dönüşür, ancak sözcükler betikte düzenlenebilir kalır. Yazı tipi girdisi, çizim girdisi ve birleşik çıktı farklı görevler yapar; resvg yazı tipi anlatımı, ayrı bir canlı SVG metni işleme akışını ele alır.

Satori'nin HTML ve CSS belgeleri, desteklediği alt kümeyi ve sınırları açıklar. Mevcut sayfanızın tarayıcı ekran görüntüsü, bu düzen motorunun onu aynen üreteceğinin vaadi değildir. Küçük kart ve normal satori içe aktarımıyla başlayın, ardından tasarımınızın gerçekten ihtiyaç duyduğu özellikleri ekleyin.

Piksel olarak başlayan logoyu hazırlayın

Tek logonuz PNG veya JPG ise ve düzenlenebilir konturlar gerekiyorsa PerfectVector ile SVG logo hazırlayın, silueti ve iç açıklıkları inceleyin, temiz SVG'yi ana dosya olarak koruyun. Ardından kartınıza gömüp iki çizim boyutunu ve son PNG'yi doğrulayın. Vektörleştirme çizimi hazırlar; Satori kart kompozisyonunu yapar. Mevcut temiz SVG doğrudan gömme adımına geçebilir. Vektörleştirme kılavuzu, kaynak ve çıktı ayrımını açıklar.

PNG'yi teslim ettikten sonra ana dosyayı, betiği ve yazı tipi girdilerini koruyun. Farklı rasterleştirme aşaması kullanıyorsanız boyutlandırmasını ayrı doğrulayın; Sharp SVG'den PNG'ye örneği o işleyicinin boyutlarını ele alır.

Sık sorulan sorular

SVG görsel Satori kartında düzenlenebilir yollara dönüşür mü? Bu örnekte logo iç içe SVG görseli olarak kalır. Özgün tek yollu kaynağı görsel verisinin içinde korunur; dış kart yolları yazılardır. Geometri düzenlemeleri için özgün ana dosyayı saklayın.

Görünür logo neden genişlik ve yüksekliğinden küçük? Görsel kutusu kaynak sınırlarını içerir. Eşkenar dörtgenimiz 128×128 kaynağın içinde kenar boşlukları bırakır; tam renk piksel sınırları da kenar yumuşatılmış kenarları dışlar. Kaynak boşluğunu ve atanan en boy oranını ayrı inceleyin.

Logonun saydam deliği kartı saydam yapar mı? Delik kart arka planının görünmesini sağlar. Krem arka planımız opaktır, dolayısıyla açıklıktaki PNG pikseli 255 alfaya sahiptir. Tesliminiz gerektiriyorsa saydam kart arka planını ayrı sınayın.

Satori PNG'yi mi döndürür? Bu başlangıç Satori'den SVG dizgesi ister, sonra resvg-js ile o dizgeyi PNG'ye işler. Düzeni ve raster teslimi bağımsız inceleyebilmek için aşamaları ayrı tutun.

Kaynaklar

1. Satori görsel, düzen ve yazı tipi belgeleri — görsel boyutları, bağımsız girdiler, standart SVG çıktısı ve desteklenen HTML/CSS kapsamı.
2. Satori 0.35.0 sürümü — özgün örnekte kullanılan sabitlenmiş sürüm.
3. SVG image öğesi — SVG görseller başka SVG dosyalarına başvurabilir.
4. Node Buffer kodlama API'si — başlangıcın base64 kodlama işlemi.
5. resvg-js kullanımı — ayrı SVG'den PNG'ye işleme aşaması.
6. Abel yazı tipi lisansı — yazı tipinin kökeni, bildirimi ve yeniden dağıtım lisansı.

Kendi PNG veya JPG logonuz için PerfectVector ile SVG ana dosyası hazırlayın ve dış hattını ve iç açıklıklarını inceleyin. Ana dosyayı saklayın, ardından kart SVG'sinde ve teslim PNG'sinde yerleşimini kullanmayı amaçladığınız boyutlarda kontrol edin.