Impor SVG PixiJS: Pilih Graphics atau Tekstur

PixiJS dapat menggunakan SVG dengan dua cara berbeda: Graphics.svg() mengurai geometri gambar yang didukung, sedangkan memuat SVG sebagai tekstur memberikan piksel untuk ditampilkan oleh Sprite. Pilih geometri ketika artwork membutuhkan penskalaan besar, dan tekstur ketika raster yang disesuaikan dengan ukuran tampilan yang dimaksudkan cocok untuk aset tersebut. PixiJS menjelaskan kedua jalur dalam panduan SVG-nya.

Uji file yang sama melalui kedua jalur sebelum memilih. Lambang kecil kami mempertahankan bukaan dan warnanya pada keduanya, tetapi jalur geometri melewatkan translasi grupnya. Tekstur sesuai dengan penempatan di browser dan menjadi lebih buram ketika diperbesar. Keduanya merupakan masalah terpisah dengan solusi berbeda.

Tentukan kebutuhan scene

Objek Graphics adalah konten gambar Pixi, bukan pohon DOM SVG dengan ID elemen aslinya. Konteksnya dapat dibagikan antarinstans, seperti yang dijelaskan dalam panduan Graphics. Pertahankan SVG asli jika Anda perlu mengedit path sumber satu per satu atau mengekspor SVG lain nanti. Kedua jalur pada akhirnya menggambar piksel di layar.

Uji kurva, lubang, dan transformasi

Contoh ini menggunakan PixiJS 8.21.0, SVG 96 × 96, resolusi renderer 1, dan tekstur SVG yang dimuat pada resolusi 1. Versi kecil digambar pada ukuran aslinya; versi besar menggunakan skala 3. Lambang asli memiliki dua path berwarna dan grup yang ditranslasikan delapan unit SVG pada setiap arah. Kontur dalamnya memiliki arah winding yang berlawanan dengan kontur luar untuk membentuk bukaan.

SVG orisinal yang sama melalui tiga renderer

Pola kotak-kotak terlihat melalui bukaan di ketiga kolom. Pola itu merupakan latar belakang di belakang artwork, bukan bentuk putih yang diwarnai di dalam lubang. Pergeseran kolom tengah terlihat pada kedua ukuran: delapan unit pada skala asli menjadi 24 piksel tampilan pada skala 3.

Pengamatan ini berlaku untuk sumber dan versi ini. Pengamatan tersebut tidak membuktikan bahwa setiap lubang, transformasi, gradien, atau SVG hasil ekspor akan bekerja dengan cara yang sama.

Simpan sumber SVG

Simpan ini sebagai emblem.svg di samping halaman Anda. Ini adalah artwork orisinal yang digambar untuk perbandingan, bukan hasil vektorisasi.

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

Jalankan kedua jalur

Letakkan skrip ini dalam halaman HTML yang disajikan melalui HTTP bersama emblem.svg. Skrip mengimpor build Pixi dengan versi yang dikunci, mengambil SVG tepercaya Anda, dan menggambar versi asli serta versi diperbesar dalam dua kolom. Kolom kiri menggunakan geometri; kolom kanan menggunakan tekstur.

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

Buka SVG asli di browser juga. Bandingkan kontur luar, bukaan, bentuk aksen, dan penempatan, bukan hanya apakah file berhasil dimuat tanpa error.

Perbaiki ketidaksesuaian yang benar-benar Anda lihat

Geometri berpindah

Dalam pengujian ini, Graphics.svg() tidak menerapkan translate(8 8) yang membungkusnya. Implementasi parser SVG dengan versi yang dikunci berguna ketika memeriksa perilaku versi dalam proyek Anda.

Untuk file khusus ini, mengganti baris posisi geometri dengan baris berikut mengompensasi satu translasi yang diketahui tersebut:

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

Koreksi menyertakan scale karena translasi yang hilang berada dalam sistem koordinat sumber. Pada skala 3, koreksinya adalah 24 piksel pada setiap arah. Ini bukan alat umum untuk meratakan transformasi. File dengan rotasi bersarang, kemiringan, atau transformasi berbeda pada path terpisah membutuhkan SVG penyerahan yang disiapkan dengan benar atau jalur rendering lain. Bandingkan file penyerahan hasil ekspor dengan master yang dapat diedit.

Tekstur yang diperbesar tampak buram

Tekstur SVG dalam gambar berisi 96 × 96 piksel. Menskalakan sprite-nya menjadi 288 × 288 tidak membaca ulang kurva sumber. Untuk menyiapkan lebih banyak piksel, muat tekstur terpisah dengan resolusi lebih tinggi:

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

Dalam build yang diuji, ini menghasilkan sumber 288 × 288 piksel dengan ukuran tekstur logis 96 × 96 dan resolusi sumber 3. Gunakan largeTexture saat membuat sprite. Query string memberikan kunci cache berbeda untuk eksperimen ini; server harus menyajikan SVG yang sama untuk URL tersebut. Panduan Assets Pixi menjelaskan caching berbasis URL, dan panduan tekstur-nya membedakan tekstur dari sumbernya.

Pilih resolusi untuk penggunaan di layar terbesar yang diperlukan, termasuk resolusi renderer yang benar-benar Anda rilis. Meningkatkan resolusi renderer saja tidak menambahkan detail pada tekstur beresolusi rendah yang sudah dimuat. Periksa juga ukuran ikon terkecil: sumber lebih besar tidak dapat membuat bukaan kecil terbaca jika tampilan akhirnya terlalu kecil.

Sebuah detail hilang

Periksa sumber asli di browser, lalu uji salinan yang lebih sederhana di Pixi. Sederhanakan SVG hingga hanya menyisakan bentuk yang terdampak, lalu tambahkan kembali grup, pewarnaan, dan efeknya satu per satu. Dokumentasi Graphics Pixi menjelaskan dukungan SVG sebagai subset; keberhasilan memuat bukan pemeriksaan kompatibilitas yang lengkap.

Pertahankan salinan raster untuk penyerahan jika salinan itu secara andal mempertahankan artwork pada ukuran yang diketahui. Untuk simbol geometris sederhana, menggambar bentuk langsung di Pixi mungkin lebih mudah dipelihara. Jangan memilih jalur berdasarkan klaim yang belum diukur bahwa jalur itu akan selalu lebih cepat atau menggunakan memori lebih sedikit. Uji scene dan perangkat target Anda.

Siapkan sumber sebelum mengimpor

Jika SVG berisi PNG yang ditempatkan di dalamnya, mengubah nama file atau mengimpornya sebagai geometri tidak merekonstruksi kontur vektor yang hilang. Gunakan daftar pemeriksaan raster tertanam untuk memeriksa sumber terlebih dahulu. Panduan vektorisasi gambar yang lebih luas menjelaskan kapan penelusuran berguna.

PerfectVector sesuai ketika hanya PNG atau JPG datar yang tersisa dan Anda membutuhkan bentuk sumber yang dapat diedit untuk ikon. Konversikan gambar Anda menjadi SVG, lalu periksa kontur, warna terpisah, dan bukaan kecil di editor SVG sebelum mengulangi pengujian Pixi. Gunakan master vektor bersih yang sudah ada secara langsung. Penelusuran tidak memperbaiki penanganan transformasi Pixi atau mengonfigurasi resolusi tekstur.

Engine lain membuat pilihan impornya sendiri. Panduan impor SVG Godot menjelaskan perilaku tekstur dan oversampling di sana; panduan SVG Unity membahas alur kerja terpisah tersebut. Jangan memindahkan pengaturan satu engine ke engine lain hanya berdasarkan ekstensi SVG.

Periksa ikon yang diserahkan

Sebelum menerima aset, bandingkan dengan sumber yang dirender browser pada ukuran terkecil dan terbesar yang dimaksudkan. Periksa bukaan di atas latar belakang kontras, penempatan grup, dan efek yang diperlukan. Catat versi Pixi, resolusi renderer, dimensi piksel sumber tekstur, dan skala scene. Simpan master SVG bersama proyek agar perubahan tata letak atau importer di kemudian hari dapat diuji terhadap sumber yang sama.

Hanya memiliki artwork raster? Siapkan SVG yang dapat diedit dengan PerfectVector, periksa kontur dan ruang negatifnya, lalu uji jalur impor Pixi yang sebenarnya pada ukuran yang digunakan antarmuka Anda.

FAQ

Apakah mengimpor SVG ke PixiJS mempertahankannya sebagai geometri vektor? Itu bergantung pada jalurnya. Graphics.svg mengurai geometri gambar yang didukung. Memuat SVG sebagai tekstur memberikan sumber raster kepada Sprite. Simpan SVG asli secara terpisah untuk pengeditan sumber dan ekspor di masa mendatang.

Mengapa sprite SVG PixiJS dapat terlihat buram? Sprite dapat menampilkan teksturnya lebih besar daripada dimensi piksel tekstur. Periksa resolusi sumber dan ukuran tampilan terbesar yang dimaksudkan. Muat tekstur dengan ukuran yang sesuai atau uji jalur geometri untuk artwork yang didukung.

Apakah Graphics.svg akan mempertahankan setiap fitur SVG? Tidak. Fitur ini mendukung subset SVG. Dalam contoh PixiJS 8.21.0 ini, lubang dan dua warna tetap ada, tetapi translasi grup tidak. Uji file hasil ekspor Anda sendiri terhadap referensi browser.

Sources

1. Panduan SVG PixiJS — Menjelaskan jalur impor tekstur dan geometri serta resolusi tekstur.
2. Panduan Graphics PixiJS — Menjelaskan berbagi GraphicsContext dan batas dukungan SVG.
3. Panduan Assets PixiJS — Mendokumentasikan pemuatan aset dan caching berbasis URL.
4. Panduan tekstur PixiJS — Menjelaskan hubungan antara tekstur dan sumbernya.
5. Parser SVG PixiJS 8.21.0 — Menyediakan implementasi dengan versi yang dikunci untuk menyelidiki perbedaan impor.