Impor SVG Konva: Pilih Gambar atau Path yang Dapat Diedit

Gunakan Konva.Image ketika Anda ingin menempatkan SVG lengkap pada canvas. Gunakan node Konva.Path terpisah ketika aplikasi Anda perlu mewarnai ulang atau memanipulasi bentuk path satu per satu. Memuat gambar SVG tidak otomatis membuat objek Konva untuk setiap elemen di dalamnya. Panduan SVG Konva menjelaskan keduanya sebagai pendekatan berbeda.

Untuk pemilih logo atau alat komposisi, satu gambar mungkin cukup. Untuk lencana dua warna yang wilayahnya membutuhkan kontrol terpisah, struktur objek berpengaruh. Tentukan apa yang harus diedit pengguna sebelum memilih loader, dan simpan sumber SVG bersama scene canvas.

Pilih representasi sebelum mengimpor

Tutorial Path Konva menerima data path SVG melalui data. Itu adalah nilai atribut d sebuah path, bukan seluruh dokumen SVG. Menyalin nilai d saja tidak membawa transformasi grup induk, warna yang diwariskan, atau perilaku viewBox SVG bersamanya.

Ada juga pertanyaan terpisah tentang file sumber: apakah SVG berisi path sama sekali? Gunakan panduan pemeriksaan raster tertanam ketika artwork adalah bitmap yang dibungkus SVG. SVG berbasis path yang valid masih dapat menjadi satu node gambar di Konva; hal itu tidak membuat file sumber menjadi vektor palsu.

Contoh dua warna dengan pengujian isian yang terlihat

Lambang orisinal di bawah berisi dua path buatan tangan dengan isian eksplisit. Canvas kiri memuat keduanya sebagai satu gambar. Canvas kanan membangun dua node Path dari geometri yang sama. Keduanya menerima permintaan isian merah muda dan skala 1.3.

Persegi panjang merah muda di kiri merupakan bukti berguna: imageNode.fill() mengubah latar belakang bentuk gambar, sementara wilayah hijau dan kuning yang opak mempertahankan warna sumbernya. Di kanan, paths[0].fill() hanya mengubah wilayah pertama. Pengujian ini menggunakan geometri orisinal, bukan hasil konversi PerfectVector.

Simpan yang berikut sebagai file HTML dan sajikan melalui server pengembangan lokal Anda. Kode mengunci Konva 10.6.0, membuat dua stage 320 × 240, dan menunggu gambar SVG didekode sebelum menggambar. Kode ini merupakan perbandingan yang sama dengan yang dijalankan untuk tangkapan layar.

<div id="image-scene"></div>
<div id="path-scene"></div>
<script src="https://unpkg.com/konva@10.6.0/konva.min.js"></script>
<script type="module">
const parts = [
  { data: 'M20 80 C20 30 70 20 100 40 L100 140 C60 140 20 120 20 80 Z', fill: '#176b55' },
  { data: 'M100 40 C150 20 180 50 180 85 C180 120 145 140 100 140 Z', fill: '#e9b949' }
];
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">${parts.map(p => `<path d="${p.data}" fill="${p.fill}"/>`).join('')}</svg>`;
const source = new Image();
source.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
await source.decode();
 
function makeStage(container) {
  const stage = new Konva.Stage({ container, width: 320, height: 240 });
  const layer = new Konva.Layer();
  stage.add(layer);
  return { stage, layer };
}
const imageScene = makeStage('image-scene');
const pathScene = makeStage('path-scene');
const imageNode = new Konva.Image({
  image: source, x: 30, y: 16, width: 200, height: 160
});
imageScene.layer.add(imageNode);
const group = new Konva.Group({ x: 30, y: 16 });
const paths = parts.map(p => new Konva.Path(p));
group.add(...paths);
pathScene.layer.add(group);
 
// Compare the same fill request on the two representations.
imageNode.fill('#db567d');
paths[0].fill('#db567d');
 
// Resize both without changing their source geometry.
imageNode.scale({ x: 1.3, y: 1.3 });
group.scale({ x: 1.3, y: 1.3 });
imageScene.layer.draw();
pathScene.layer.draw();
 
const png = pathScene.stage.toDataURL({ pixelRatio: 2 });
const exported = new Image();
exported.src = png;
await exported.decode();
</script>

Dalam contoh yang sengaja kecil ini, setiap path memiliki pewarnaannya sendiri dan menggunakan koordinat yang sama. Grup memberikan satu posisi dan skala kepada kedua path yang dapat diedit. Mengubah skala grup menjaga data setiap path tetap utuh; perubahan itu mengubah tempat dan ukuran grup digambar.

Untuk file SVG tepercaya yang sudah ada dan hanya membutuhkan penempatan seluruh gambar, tutorial Image menunjukkan alur kerja pemuatan gambar normal. Muat URL SVG sebagai gambar, tunggu hingga dimuat, lalu berikan ke Konva.Image. Komponen React yang merender markup SVG adalah nilai yang berbeda dari objek gambar yang diharapkan canvas.

Bawa lebih dari data path ketika artwork kompleks

Array parts contoh adalah model eksplisit untuk dua bentuk yang diketahui. Itu bukan importer SVG. Sebelum menggunakan pendekatan serupa pada artwork hasil ekspor, periksa apa yang membentuk tampilannya:

• Transformasi grup dapat memindahkan, memutar, atau menskalakan semua anaknya. Pertahankan hubungan tersebut atau gabungkan transformasi ke geometri secara sengaja.
• Pewarnaan dapat berasal dari elemen leluhur atau aturan CSS. Tentukan fill dan stroke yang dimaksudkan alih-alih menganggap setiap path mendeklarasikannya.
• Gradien, clipping, mask, dan filter memiliki definisi dan referensinya sendiri. String d yang disalin tidak merekonstruksi efek tersebut.
• Teks dan bentuk dasar mungkin membutuhkan penanganan terpisah. Jangan menganggap setiap objek yang terlihat sudah berupa path.

Simpan rendering asli di samping rekonstruksi Anda saat menguji. Mulailah dengan satu wilayah yang dapat dikenali, bandingkan posisi dan warnanya, lalu tambahkan bentuk lainnya. Panduan pengeditan SVG membahas pembersihan sumber ketika struktur objek sulit digunakan.

Jika kontrol path satu per satu tidak diperlukan, memuat SVG lengkap sebagai gambar dapat menghindari pekerjaan rekonstruksi itu. Konva juga mendokumentasikan rendering SVG dengan pustaka eksternal seperti canvg, lalu menempatkan canvas yang dihasilkan dalam Konva.Image. Itu tetap merupakan representasi gambar; pendekatan tersebut tidak memberikan node Konva terpisah kepada pengguna untuk setiap path sumber. Lihat opsi yang didokumentasikan.

Untuk artwork yang hanya membutuhkan warna sumber berbeda, pendekatan lain adalah memperbarui SVG itu sendiri dan memuat ulang gambarnya. Pemelihara Konva menjelaskan alur kerja tersebut dalam issue react-konva 530. Gunakan pengeditan terstruktur yang sesuai dengan SVG yang Anda ketahui, alih-alih mengganti setiap isian tanpa pandang bulu dan kehilangan perbedaan warna yang disengaja.

Perlakukan ekspor canvas sebagai penyerahan raster

Contoh memanggil pathScene.stage.toDataURL({ pixelRatio: 2 }). Stage 320 × 240-nya menghasilkan PNG terdekode 640 × 480. Meningkatkan pixelRatio mengubah dimensi piksel hasil ekspor; hal itu tidak mengubah PNG menjadi SVG yang dapat diedit. Dokumentasi ekspor Konva menjelaskan pengaturan ini.

Pisahkan ketiga hasil yang diserahkan ini:

1. SVG asli, untuk pengeditan vektor dan perbandingan.
2. Data scene aplikasi Anda, termasuk referensi path atau gambar dan pengeditan yang didukung aplikasi.
3. PNG atau ekspor raster lain, untuk penggunaan yang membutuhkan gambar hasil rendering.

Buka kembali PNG hasil ekspor dan periksa dimensi serta detail kecilnya. Uji juga gambar SVG di browser yang didukung aplikasi Anda; panduan SVG Konva mencatat perbedaan kompatibilitas rendering. Contoh ini menguji satu SVG sederhana yang mandiri, sehingga tidak membuktikan dukungan untuk setiap file atau efek hasil ekspor.

Hindari menilai kualitas vektor hanya dari pratinjau canvas. Panduan SVG berpiksel memisahkan geometri sumber dari pratinjau raster dan ukuran tampilan.

Kapan PerfectVector membantu sumber

Jika aset awal Anda hanya berupa motif PNG atau JPG, PerfectVector dapat membantu merekonstruksi geometri SVG yang dapat diedit sebelum Anda membangun scene Konva. Konversikan gambar menjadi vektor, buka hasilnya di editor, dan periksa siluet, lubang, dan wilayah warna sebelum memetakan path ke aplikasi Anda.

Vektorisasi tidak membuat model scene Konva atau parser SVG sembarang. Anda tetap memilih representasi dan membawa properti yang dibutuhkannya. Jika Anda sudah memiliki master SVG yang dapat digunakan, gunakan file tersebut. Untuk foto atau tekstur lukisan yang sebaiknya tetap berupa piksel, node gambar sering kali merupakan representasi yang sesuai tanpa penelusuran.

Periksa impor dengan artwork Anda sendiri

Sebelum menambahkan SVG ke editor yang dapat digunakan ulang:

1. Pilih satu node seluruh gambar atau node bentuk terpisah berdasarkan kontrol yang dibutuhkan pengguna.
2. Ubah warna satu wilayah dan pastikan hanya objek yang dimaksudkan berubah.
3. Ubah ukuran desain lengkap dan periksa jarak, tampilan stroke, dan clipping.
4. Ekspor pada dimensi piksel yang diperlukan dan buka kembali file raster.
5. Buka kembali master SVG tersimpan secara mandiri, agar ekspor canvas tidak pernah menjadi satu-satunya salinan Anda.

FAQ

Apakah Konva.Image membuat path di dalam SVG dapat diedit? Tidak. Fitur ini menampilkan SVG sebagai satu node gambar. Untuk mengendalikan wilayah path satu per satu, buat node Path terpisah dari data path yang sesuai atau gunakan alur kerja pengeditan SVG yang mempertahankan struktur dokumen.

Mengapa fill menambahkan persegi panjang alih-alih mewarnai ulang SVG saya? Pada node Image, isian mewarnai bentuk gambar di belakang konten gambarnya. Isian tidak menulis ulang fill di dalam SVG. Edit SVG sumber dan muat ulang, atau gunakan node Path terpisah ketika aplikasi Anda membutuhkan kontrol warna satu per satu.

Apakah meningkatkan pixelRatio mengekspor file vektor? Tidak. Dalam contoh ini, pixelRatio 2 menghasilkan PNG dengan lebar dan tinggi dua kali stage. Simpan sumber SVG secara terpisah untuk pengeditan vektor.

Sources

1. Konva — SVG pada canvas — Menjelaskan opsi Image, Path, dan renderer eksternal serta batas kompatibilitas browser.
2. Konva — Tutorial Path — Mendokumentasikan pembangunan Path dari data path SVG dan properti pewarnaan eksplisit.
3. Konva — Tutorial Image — Menunjukkan pemuatan gambar dan penempatannya dalam scene Konva.
4. Konva — Ekspor gambar berkualitas tinggi — Menjelaskan ekspor raster dan pengaruh pixelRatio terhadap dimensi output.
5. Konva — Issue react-konva 530 — Mencatat pendekatan pemelihara untuk mengedit sumber dan memuat ulang guna mengubah warna gambar SVG.

Memulai dengan ikon yang hanya tersedia sebagai raster? Ubah gambar Anda menjadi path SVG, periksa wilayah warna yang dipulihkan, dan uji satu wilayah di Konva sebelum menghubungkan bagian editor lainnya.