Teks foreignObject SVG: Perbaiki Label Ekspor Hilang

Jika bentuk SVG tetap ada setelah ekspor tetapi labelnya hilang, periksa apakah label yang hilang memakai <foreignObject>. Elemen ini dapat berisi HTML yang berhasil ditata browser tetapi tidak didukung renderer tujuan. Ganti label yang bermasalah dengan <text> dan <tspan> SVG native, atau pilih jalur ekspor yang mempertahankan tampilannya.

Pertama, buka file ekspor yang persis sama di browser. Jika label juga hilang di sana, periksa namespace, batas, dan gayanya sebelum menyalahkan pengimpor. Pertahankan karya asli: men-trace seluruh gambar tidak diperlukan ketika hanya wadah teks yang gagal.

Mengapa gambar bertahan sementara labelnya hilang

SVG dapat mencampur bentuk biasa dengan konten dari namespace XML lain. Gunung yang digambar dengan <path> dan matahari yang digambar dengan <circle> adalah SVG native. Paragraf di dalam <foreignObject> mungkin berupa HTML, dengan aturan pembungkusan teks dan tata letaknya sendiri. Referensi foreignObject MDN menjelaskan perbedaan itu.

Karena itu, ekstensi .svg tidak menjamin bahwa setiap bagian memakai fitur rendering yang sama. Aplikasi tujuan dapat menggambar gunung dan matahari tetapi menghilangkan paragraf HTML. Mengubah warna teks atau meningkatkan resolusi ekspor tidak akan menambahkan dukungan HTML ke renderer tersebut.

Pengujian kecil: ubah hanya label

Kami membuat kartu SVG berukuran 480 × 240 dengan sebuah path, lingkaran, dan kata-kata "Keep artwork and labels separate." File pertama memakai label HTML. File kedua mempertahankan bentuk yang sama dan mengganti hanya label dengan teks native serta tiga baris eksplisit.

Dalam pratinjau browser kami, kedua label muncul. Merender file yang sama ke PNG dengan sharp 0.34.4, memakai librsvg 2.61.1 yang disertakannya, menghasilkan keluaran di bawah: label HTML hilang, sementara label native tetap ada. Keluaran label HTML juga identik pada tingkat piksel dengan file kontrol yang labelnya dihapus. Ini adalah pengujian file dan versi renderer tersebut, bukan penilaian kompatibilitas untuk setiap editor.

File asli cukup kecil untuk direproduksi. Simpan sebagai html-label.svg lalu buka di browser:

<svg xmlns="http://www.w3.org/2000/svg"
  width="480" height="240" viewBox="0 0 480 240">
  <rect width="480" height="240" rx="20" fill="#f5f1e7"/>
  <path d="M40 135Q90 15 140 135Z" fill="#087f75"/>
  <circle cx="90" cy="95" r="18" fill="#f4bc45"/>
  <foreignObject x="180" y="70" width="230" height="110">
    <div xmlns="http://www.w3.org/1999/xhtml"
      style="font: 28px/1.25 Arial, sans-serif; color: #172b34;">
      Keep artwork and labels separate
    </div>
  </foreignObject>
</svg>

Untuk file kedua, ganti seluruh elemen foreignObject dengan label ini dan simpan sebagai native-label.svg:

<text x="180" y="96" font-family="Arial, sans-serif"
  font-size="28" fill="#172b34">
  <tspan x="180" dy="0">Keep artwork</tspan>
  <tspan x="180" dy="35">and labels</tspan>
  <tspan x="180" dy="35">separate</tspan>
</text>

Nilai x memulai setiap baris pada posisi horizontal yang sama. Nilai dy menggeser baris berikutnya ke bawah. Ini sengaja melepaskan pembungkusan otomatis HTML: penulis memilih pemisah baris dan memastikan teks muat. MDN mendokumentasikan penempatan tspan, dan librsvg mencantumkan elemen SVG yang didukung, termasuk text dan tspan.

Buka kedua file melalui jalur penyerahan yang sebenarnya, seperti konverter gambar atau pembuat PDF Anda. Bandingkan hasil tersimpan, bukan hanya pratinjau sumber. Dimensi yang sama dengan contoh tidak menjamin font yang sama di komputer lain.

Jika label juga hilang di browser

Periksa file .svg yang telah diserialisasi, bukan hanya halaman yang membuatnya. SVG inline dalam HTML dan dokumen SVG mandiri adalah konteks parsing yang berbeda.

Contoh ini secara eksplisit menempatkan div dalam http://www.w3.org/1999/xhtml. MDN mencatat bahwa deklarasi namespace ini diperlukan untuk konten HTML dalam dokumen SVG mandiri, meskipun contoh HTML inline dapat menghilangkannya. Jika Anda membuat elemen dengan JavaScript, gunakan namespace yang sesuai untuk anak HTML; div yang dibuat dalam namespace SVG bukan wadah paragraf HTML.

Lalu periksa bagian label berikut:

• Berikan nilai width dan height yang eksplisit dan positif pada foreignObject untuk area label yang dimaksud.
• Pertahankan koordinat x dan y di dalam gambar yang terlihat, dengan ruang untuk semua baris.
• Periksa display, visibility, opacity, dan warna teks pada wadah beserta anak-anaknya.
• Pastikan file ekspor menyertakan gaya yang diperlukan, bukan bergantung pada stylesheet halaman web di sekitarnya.

Dalam contoh, seluruh gaya label bersifat inline dan kotaknya selebar 230 satuan serta setinggi 110. Itu menghilangkan CSS eksternal sebagai variabel. Namun, itu tidak membuat foreignObject portabel ke renderer yang tidak memiliki fitur tersebut.

Untuk ekspor draw.io, konversikan label pada sumbernya

Jika Anda masih memiliki diagram yang bisa diedit, perbaiki ekspor label di sana sebelum menyunting XML secara manual. Dokumentasi ekspor draw.io saat ini menawarkan Convert Labels to SVG untuk label berformat yang didukung: pilih bentuk atau konektor, buka bagian Advanced pada tab Text, lalu aktifkan kotak centangnya.

Opsi ini memiliki batasan. Dokumentasi mengecualikan label dengan struktur seperti tabel, daftar, tautan, atau warna latar dari konversi ini. Jika opsi tidak tersedia, menonaktifkan Formatted Text dan Word Wrap adalah jalur lain yang didokumentasikan; Anda mungkin perlu memasukkan pemisah baris manual dan memeriksa tata letak kembali.

Ekspor salinan baru dan buka kembali di aplikasi penerima. Menyembunyikan peringatan "Text is not SVG" tidak mengonversi label. Menyematkan font mengatasi dependensi font, bukan ketiadaan dukungan tata letak HTML.

Untuk diagram ilustratif, pisahkan karya impor dari label. Panduan bentuk SVG khusus draw.io membahas sisi karya dalam alur tersebut.

Pilih format teks untuk penerima berikutnya

Teks native merupakan perbaikan yang berguna ketika penerima perlu menyunting kata-kata, tetapi masih bergantung pada font yang dapat digunakan. Jika label muncul dengan jenis huruf salah, ikuti pemeriksaan font SVG alih-alih memperlakukannya sebagai masalah wadah hilang yang sama.

Mengubah tulisan menjadi outline hanya bekerja ketika alat sumber dapat melihat dan mengonversi tulisan tersebut. Membuka ekspor yang sudah tidak lengkap dan mengonversi objek yang tersisa tidak dapat memulihkan kata-kata yang tidak ada dalam dokumen impor itu. PNG mempertahankan piksel, sehingga tidak cocok ketika penerima membutuhkan kata-kata yang bisa diedit atau path pemotongan vektor.

Peran PerfectVector dalam kartu ilustrasi

Jika ilustrasi kartu hanya tersedia sebagai PNG atau JPG, alur clipart ke SVG PerfectVector dapat menyiapkan kandidat vektor untuk karya tersebut. Pertahankan kata-kata sebagai elemen teks terpisah dalam editor desain. Periksa tepi dan celah internal ilustrasi, tambahkan label, lalu uji file gabungan di renderer tujuan.

Panduan vektorisasi gambar menjelaskan bagaimana piksel menjadi path. PerfectVector tidak memperbaiki label HTML dalam SVG. Ketika ilustrasi sudah memiliki path yang baik, pertahankan dan ubah hanya label yang gagal. Tangkapan layar dengan label hilang tidak mengandung tulisan untuk direkonstruksi, dan men-trace tulisan yang terlihat akan membuat bentuk, bukan kata-kata yang bisa diedit.

Sebelum mengirim SVG yang diperbaiki

1. Buka kembali salinan ekspor di browser dan aplikasi tujuan yang dimaksud.
2. Pastikan setiap label, termasuk baris terakhirnya, terlihat.
3. Periksa bahwa karya tidak berpindah atau berubah ukuran.
4. Verifikasi font, atau periksa tulisan outline pada ukuran yang dimaksud.
5. Simpan sumber yang bisa diedit bersama salinan untuk diserahkan.

FAQ

Mengapa teks SVG muncul di Chrome tetapi hilang dalam ekspor PNG? Label mungkin berupa HTML di dalam foreignObject, sementara renderer PNG mendukung subset SVG yang berbeda. Periksa markup label yang hilang dan render versi teks native melalui jalur ekspor yang sama.

Apakah menambahkan namespace XHTML memperbaiki setiap ekspor foreignObject? Tidak. Itu memperbaiki namespace konten HTML dalam SVG mandiri. Aplikasi tujuan tetap perlu mendukung konten tersebut, dan label tetap memerlukan dimensi yang sesuai serta gaya yang membuatnya terlihat.

Bisakah tspan membungkus teks seperti paragraf HTML? Contoh memakai baris eksplisit dan pergeseran vertikal. Contoh tidak mereproduksi tata letak paragraf HTML. Pilih pemisah baris sesuai ruang yang tersedia dan periksa dengan font tujuan.

Haruskah saya memvektorisasikan seluruh kartu untuk memulihkan labelnya? Pertahankan path yang ada dan buat ulang label dari teks aslinya. Vektorisasi hanya karya yang berupa piksel. Tulisan hasil tracing adalah geometri, sehingga tidak mempertahankan kata-kata yang bisa diedit.

Sources

1. MDN — foreignObject — Mendefinisikan konten asing, atribut geometri, dan namespace XHTML dalam SVG mandiri.
2. MDN — tspan — Menjelaskan penempatan bagian teks SVG native.
3. draw.io — Masalah teks SVG hasil ekspor — Mendokumentasikan konversi label native, batas format, dan pengaturan ekspor alternatif.
4. GNOME — Fitur SVG dan CSS yang didukung Librsvg — Mencantumkan elemen dan atribut yang didukung renderer.

Jika ilustrasi Anda masih bitmap, siapkan clipart sebagai SVG, periksa bentuknya, dan tambahkan teks secara terpisah. Verifikasi keduanya dalam file ekspor sebelum Anda menyerahkannya.