PixiJS SVG içe aktarma: Graphics mi, doku mu?

PixiJS bir SVG’yi iki farklı şekilde kullanabilir: Graphics.svg() desteklenen çizim geometrisini ayrıştırırken SVG’yi doku olarak yüklemek, bir Sprite nesnesine görüntüleyeceği pikselleri sağlar. Görselin büyük ölçüde ölçeklenmesi gerekiyorsa geometriyi; hedef görüntüleme boyutuna uygun bir raster görüntü işinizi görüyorsa dokuyu seçin. PixiJS her iki yöntemi de SVG kılavuzu belgesinde açıklar.

Seçim yapmadan önce aynı dosyayı her iki yöntemle de deneyin. Küçük amblemimizin açıklığı ve renkleri ikisinde de korundu, ancak geometri yöntemi grubun ötelemesini uygulamadı. Doku, tarayıcıdaki yerleşimle eşleşti ve büyütüldüğünde kenarları yumuşadı. Bunlar farklı çözümler gerektiren ayrı sorunlardır.

Sahnenin neye ihtiyacı olduğunu belirleyin

Bir Graphics nesnesi, özgün öğe kimliklerini içeren bir SVG DOM ağacı değil, Pixi çizim içeriğidir. Graphics kılavuzu belgesinde açıklandığı gibi bağlamı örnekler arasında paylaşılabilir. Kaynaktaki yolları tek tek düzenlemeniz veya daha sonra başka bir SVG dışa aktarmanız gerektiğinde özgün SVG’yi saklayın. Her iki yöntem de sonuçta ekrana piksel çizer.

Bir eğriyi, deliği ve dönüşümü deneyin

Bu örnekte PixiJS 8.21.0, 96 × 96 boyutunda bir SVG, çizim motoru çözünürlüğü 1 ve 1 çözünürlükte yüklenen bir SVG dokusu kullanılır. Küçük sürüm doğal boyutunda çizilir; büyük sürümde 3 ölçeği kullanılır. Özgün amblemde iki renkli yol ve her iki yönde sekiz SVG birimi ötelenmiş bir grup bulunur. Açıklığı oluşturmak için iç kontur dış konturun ters yönünde ilerler.

Aynı özgün SVG, üç farklı çizim motorunda

Üç sütunda da dama deseni açıklıktan görünür. Bu, deliğin içine boyanmış beyaz bir şekil değil, görselin arkasındaki arka plandır. Ortadaki sütunun kayması iki boyutta da görülebilir: doğal ölçekteki sekiz birim, 3 ölçeğinde 24 ekran pikseline dönüşür.

Bu gözlemler bu kaynağa ve sürüme özgüdür. Her deliğin, dönüşümün, degradenin veya dışa aktarılmış SVG’nin aynı şekilde çalışacağını göstermez.

SVG kaynağını kaydedin

Bunu sayfanızın yanına emblem.svg olarak kaydedin. Bu, karşılaştırma için çizilmiş özgün bir görseldir; vektörleştirme sonucu değildir.

<svg xmlns="http://www.w3.org/2000/svg"
     width="96" height="96" viewBox="0 0 96 96">
  <g transform="translate(8 8)">
    <path fill="#145c61" d="M40 0
      C62 0 80 18 80 40 C80 62 62 80 40 80
      C18 80 0 62 0 40 C0 18 18 0 40 0 Z
      M40 20 C29 20 20 29 20 40 C20 51 29 60 40 60
      C51 60 60 51 60 40 C60 29 51 20 40 20 Z"/>
    <path fill="#e68546"
      d="M62 5 C74 9 80 21 78 34 L61 32
         C63 23 61 15 55 10 Z"/>
  </g>
</svg>

Her iki yöntemi çalıştırın

Bu betiği, emblem.svg ile aynı yerde bulunan ve HTTP üzerinden sunulan bir HTML sayfasına yerleştirin. Betik sabitlenmiş Pixi derlemesini içe aktarır, güvenilir SVG’nizi getirir ve doğal boyutlu ve büyütülmüş sürümleri iki sütunda çizer. Soldaki sütunda geometri, sağdakinde doku kullanılır.

<script type="module">
import { Application, Assets, Graphics, Sprite }
  from 'https://cdn.jsdelivr.net/npm/pixi.js@8.21.0/dist/pixi.mjs';
 
const app = new Application();
await app.init({
  width: 640, height: 420, resolution: 1,
  antialias: true, background: '#e7eeea', preference: 'webgl'
});
document.body.append(app.canvas);
 
const response = await fetch('emblem.svg');
if (!response.ok) throw new Error('SVG request failed');
const svgText = await response.text();
const texture = await Assets.load({
  src: 'emblem.svg', data: { resolution: 1 }
});
 
for (const [scale, y] of [[1, 12], [3, 120]]) {
  const geometry = new Graphics().svg(svgText);
  geometry.scale.set(scale);
  geometry.position.set(16, y);
  const sprite = new Sprite(texture);
  sprite.scale.set(scale);
  sprite.position.set(336, y);
  app.stage.addChild(geometry, sprite);
}
</script>

Özgün SVG’yi tarayıcıda da açın. Yalnızca dosyanın hatasız yüklenip yüklenmediğine değil; dış kontura, açıklığa, vurgu şekline ve yerleşime de bakarak karşılaştırın.

Gördüğünüz uyuşmazlığı düzeltin

Geometri yer değiştirdi

Bu testte Graphics.svg(), kapsayıcı translate(8 8) dönüşümünü uygulamadı. Projenizdeki sürümün davranışını incelerken sabitlenmiş SVG ayrıştırıcı uygulaması faydalıdır.

Bu dosya özelinde, geometrinin konumunu ayarlayan satırı aşağıdakiyle değiştirmek, bilinen bu tek ötelemeyi telafi eder:

geometry.position.set(16 + 8 * scale, y + 8 * scale);

Eksik öteleme kaynağın koordinat sistemine ait olduğu için düzeltmede scale bulunur. 3 ölçeğinde düzeltme her yönde 24 pikseldir. Bu, dönüşümleri genel olarak koordinatlara işleyen bir çözüm değildir. İç içe döndürmeler, eğmeler veya ayrı yollarda farklı dönüşümler içeren bir dosya için düzgün hazırlanmış bir teslim SVG’si ya da başka bir çizim yöntemi gerekir. Dışa aktarılan teslim dosyasını düzenlenebilir ana dosyayla karşılaştırın.

Büyütülmüş doku yumuşak görünüyor

Şekildeki SVG dokusu 96 × 96 piksel içerir. Sprite’ını 288 × 288 boyutuna ölçeklemek, kaynak eğrileri yeniden okumaz. Daha fazla piksel hazırlamak için daha yüksek çözünürlükte ayrı bir doku yükleyin:

const largeTexture = await Assets.load({
  src: 'emblem.svg?resolution=3',
  data: { resolution: 3 }
});

Test edilen derlemede bu işlem, mantıksal doku boyutu 96 × 96 ve kaynak çözünürlüğü 3 olan 288 × 288 piksellik bir kaynak üretti. Sprite’ı oluştururken largeTexture kullanın. Sorgu dizesi bu denemeye farklı bir önbellek anahtarı verir; sunucu bu URL için aynı SVG’yi sunmalıdır. Pixi’nin Assets kılavuzu belgesi URL tabanlı önbelleklemesini açıklar; doku kılavuzu belgesi ise dokuyla kaynağı arasındaki ayrımı anlatır.

Çözünürlüğü, kullanıma sunduğunuz çizim motoru çözünürlüğü de dahil olmak üzere ekranda gereken en büyük kullanım boyutuna göre seçin. Yalnızca çizim motoru çözünürlüğünü artırmak, önceden yüklenmiş düşük çözünürlüklü bir dokuya ayrıntı eklemez. En küçük simge boyutunu da kontrol edin: son görüntüleme boyutu çok küçükse daha büyük bir kaynak, küçücük bir açıklığı okunabilir hâle getiremez.

Bir ayrıntı eksik

Özgün kaynağı tarayıcıda kontrol edin, ardından Pixi’de daha basit bir kopyayı deneyin. SVG’yi etkilenen şekillere indirgeyin ve gruplarını, boyama özelliklerini ve efektlerini tek tek geri ekleyin. Pixi’nin Graphics belgeleri belgesi SVG desteğinin bir alt kümeyle sınırlı olduğunu belirtir; başarıyla yüklenmesi, tam bir uyumluluk kontrolü değildir.

Bilinen boyutlarda görseli güvenilir biçimde koruyabiliyorsa raster görüntü içeren bir teslim kopyası saklayın. Basit bir geometrik sembol için şekilleri doğrudan Pixi’de çizmek daha kolay sürdürülebilir olabilir. Her zaman daha hızlı olacağı veya daha az bellek kullanacağı yönünde ölçülmemiş bir iddiaya dayanarak yöntem seçmeyin. Sahnenizi ve hedef cihazlarınızı test edin.

İçe aktarmadan önce kaynağı hazırlayın

SVG yerleştirilmiş bir PNG içeriyorsa dosya adını değiştirmek veya geometri olarak içe aktarmak, eksik vektör konturlarını yeniden oluşturmaz. Önce kaynağı incelemek için gömülü raster görüntü kontrol listesini kullanın. Daha kapsamlı görsel vektörleştirme rehberi, vektörleştirmenin ne zaman faydalı olduğunu açıklar.

Elinizde yalnızca düz bir PNG veya JPG görüntüsü kaldığında ve simge için düzenlenebilir kaynak şekillere ihtiyaç duyduğunuzda PerfectVector uygundur. Görselinizi SVG’ye dönüştürün, ardından Pixi testini tekrarlamadan önce bir SVG düzenleyicisinde konturu, ayrı renkleri ve küçük açıklıkları inceleyin. Mevcut temiz bir vektör ana dosyanız varsa onu doğrudan kullanın. Vektörleştirme, Pixi’nin dönüşümleri uygulama biçimini düzeltmez veya doku çözünürlüğünü yapılandırmaz.

Diğer motorlar içe aktarma konusunda kendi tercihlerini yapar. Godot SVG içe aktarma rehberi, oradaki doku ve aşırı örnekleme davranışını açıklar; Unity SVG rehberi ise bu ayrı iş akışını ele alır. Yalnızca SVG uzantısına bakarak bir motorun ayarlarını diğerine taşımayın.

Teslim edilen simgeyi kontrol edin

Varlığı kabul etmeden önce, hedeflenen en küçük ve en büyük boyutlarında tarayıcıda çizilmiş kaynakla karşılaştırın. Zıt renkli arka planlar üzerinde açıklığı, grubun yerleşimini ve gereken efektleri kontrol edin. Pixi sürümünü, çizim motoru çözünürlüğünü, doku kaynağının piksel boyutlarını ve sahne ölçeğini kaydedin. SVG ana dosyasını projeyle birlikte saklayın; böylece yerleşimde veya içe aktarıcıda yapılacak bir değişikliği aynı kaynakla test edebilirsiniz.

Elinizde yalnızca raster bir görsel mi var? PerfectVector ile düzenlenebilir bir SVG hazırlayın, konturunu ve negatif alanını inceleyin, ardından gerçek Pixi içe aktarma yöntemini arayüzünüzün kullandığı boyutlarda test edin.

Sık sorulan sorular

SVG’yi PixiJS’e aktarmak onu vektör geometrisi olarak korur mu? Yönteme bağlıdır. Graphics.svg desteklenen çizim geometrisini ayrıştırır. SVG’yi doku olarak yüklemek, Sprite’a bir raster kaynak sağlar. Kaynağı düzenlemek ve ileride dışa aktarmak için özgün SVG’yi ayrıca saklayın.

PixiJS’te bir SVG sprite’ı neden bulanık görünebilir? Bir sprite, dokusunu dokunun piksel boyutlarından daha büyük gösterebilir. Kaynak çözünürlüğünü ve hedeflenen en büyük görüntüleme boyutunu kontrol edin. Uygun boyutta bir doku yükleyin veya desteklenen görseller için geometri yöntemini deneyin.

Graphics.svg her SVG özelliğini korur mu? Hayır. SVG’nin bir alt kümesini destekler. Bu PixiJS 8.21.0 örneğinde delik ve iki renk korundu, ancak grubun ötelemesi uygulanmadı. Kendi dışa aktardığınız dosyayı bir tarayıcı referansıyla karşılaştırın.

Kaynaklar

1. PixiJS SVG guide — Doku ve geometri içe aktarma yöntemlerini ve doku çözünürlüğünü açıklar.
2. PixiJS Graphics guide — GraphicsContext paylaşımını ve SVG desteğinin sınırlarını açıklar.
3. PixiJS Assets guide — Varlık yüklemeyi ve URL tabanlı önbelleklemeyi belgeler.
4. PixiJS texture guide — Dokularla kaynakları arasındaki ilişkiyi açıklar.
5. PixiJS 8.21.0 SVG parser — İçe aktarma farklarını araştırmak için sürümü sabitlenmiş uygulamayı sağlar.