Mengapa Font SVG Berubah Setelah Ekspor atau Impor

Font SVG berubah karena teks aktif SVG biasanya menyebut nama font; file tidak otomatis membawa bentuk huruf font tersebut. Jika browser, editor, perangkat lunak potong, atau komputer penerima tidak dapat menggunakan font yang disebutkan, font pengganti dipilih. Lebar glyph berbeda kemudian mengubah pergantian baris, penyelarasan, dan posisi gambar di dekatnya.

Ada dua strategi penyerahan yang andal. Pertahankan teks aktif ketika tujuan membutuhkan kata yang dapat dipilih, dicari, atau diedit dan Anda dapat menyediakan font dengan benar. Ubah teks menjadi kontur vektor ketika tampilan harus tetap dan pengeditan kata tidak lagi diperlukan. Dalam kedua kasus, simpan master terpisah yang dapat diedit.

Untuk ekspor PNG otomatis, muat file font secara eksplisit dalam resvg dan bandingkan huruf yang dirender dengan sumber sebelum menyerahkan.

Untuk gambar dalam dokumen, bandingkan ilustrasi SVG dan label yang ditata dalam LaTeX. Memisahkan geometri gambar dari teks label memungkinkan dokumen menata kata sambil mempertahankan master SVG.

Pertama, tentukan apakah SVG masih memiliki teks

Ekstensi file saja tidak menjawabnya. SVG dapat mewakili huruf setidaknya dengan dua cara umum:

<text font-family="Example Sans" font-weight="600">Sample</text>

Itu teks aktif. SVG menyimpan karakter dan instruksi gaya. Perender harus menemukan font yang sesuai untuk mengubah karakter menjadi glyph terlihat.

Teks berkontur lebih menyerupai ini:

<path d="M ... Z" />

Di sini, setiap huruf telah dikonversi menjadi geometri vektor. Penerima tidak membutuhkan font, tetapi kata bukan lagi string teks biasa yang dapat diedit.

Anda dapat memeriksa tanpa memahami seluruh markup:

1. buat salinan SVG;
2. buka salinan dalam editor teks biasa;
3. cari <text dan <tspan;
4. cari nama font yang terlihat;
5. jika tidak ada, periksa apakah huruf dibuat dari elemen <path>.

Dalam editor vektor, gunakan alat teks dan klik huruf. Kursor teks berkedip menunjukkan teks aktif. Node di sekitar setiap glyph menunjukkan kontur.

Tiga keadaan tipografi

Penyebab 1: font yang diinginkan tidak terpasang

Atribut font-family SVG merupakan daftar nama keluarga font berdasarkan prioritas. Seperti dijelaskan referensi font-family SVG MDN, perender memilih dari daftar itu. Jika tidak dapat mencocokkan keluarga pertama, perender beralih ke berikutnya dan akhirnya ke keluarga umum seperti sans-serif atau serif.

Ini umum terjadi ketika:

• desainer menggunakan font lokal yang tidak dimiliki penerima;
• font diaktifkan melalui layanan langganan hanya pada satu mesin;
• SVG dipindahkan dari editor desktop ke ponsel, tablet, aplikasi potong, atau aplikasi kantor;
• nama keluarga dalam font berbeda dari nama file atau nama di folder unduhan;
• hanya satu gaya terpasang, sementara SVG meminta ketebalan lain atau gaya miring.

Memasang “font serupa” tidak memulihkan tata letak. Dua font sans-serif dapat memiliki lebar huruf, tinggi ascender, kerning, dan metrik garis dasar berbeda. Pengganti mungkin tampak mirip tetapi tetap menggeser kata yang seharusnya berada di tengah. Setelah font yang diinginkan tersedia, contoh penyelarasan vertikal teks SVG membantu membedakan penempatan garis dasar dari kotak teks dan pemusatan visual.

Penyebab 2: SVG mengharapkan font web yang tidak dimuat

SVG dalam halaman web dapat menerima font dari CSS halaman. SVG juga dapat memiliki blok gaya dengan aturan @font-face; SVG 2 mengharuskan dukungan font unduhan melalui model CSS Fonts. Pengaturan itu gagal ketika URL font keliru, file belum tersedia di server, akses diblokir, format yang diminta tidak didukung, atau SVG dibuka sendiri alih-alih dalam halaman yang menyediakan gaya.

Gunakan alat pengembang browser dan muat ulang halaman. Dalam panel Network, filter file font dan cari permintaan gagal. Dalam gaya terhitung elemen <text>, pastikan font yang benar-benar dirender, jangan hanya percaya nama keluarga yang dideklarasikan.

SVG yang hanya bekerja saat disematkan dalam satu situs belum tentu file penyerahan mandiri. Uji SVG ekspor langsung di jendela browser privat dan perangkat lain. Itu memperlihatkan ketergantungan tersembunyi pada layanan font yang memerlukan login, font tersimpan dalam cache, atau stylesheet situs.

Menyematkan sumber daya font dapat membuat SVG web lebih portabel, tetapi memperbesar file, mungkin menghadapi batas dukungan khusus aplikasi, dan harus diizinkan lisensi font. Periksa lisensi sebenarnya, jangan menganggap lisensi desktop mengizinkan distribusi ulang data font.

Penyebab 3: keluarga atau ketebalan tidak cocok persis

Pencocokan font CSS menggunakan lebih dari label keluarga terlihat. SVG mungkin meminta:

font-family: "Example Sans";
font-style: normal;
font-weight: 600;

Jika file yang tersedia hanya memiliki ketebalan 400 dan 700, perender mungkin menyintesis ketebalan atau memilih gaya terdekat. Font variabel menambahkan sumbu dan nama instans yang mungkin ditafsirkan berbeda oleh aplikasi impor. Perangkat lunak desain atau potong lama mungkin mengabaikan sebagian fitur OpenType, ligatur, atau pengaturan variasi.

Periksa dokumen asli dan SVG berdampingan:

• nama keluarga persis;
• gaya dan angka ketebalan;
• jarak huruf;
• kapitalisasi dan karakter sebenarnya;
• fitur OpenType seperti ligatur;
• nilai sumbu font variabel;
• perilaku teks pada path atau teks vertikal.

Jangan memperbaiki ketidakcocokan keluarga dengan mengubah skala setiap kata secara manual. Itu menyembunyikan gejala sambil tetap memakai glyph keliru.

Penyebab 4: ekspor mempertahankan teks, tetapi aplikasi impor menanganinya berbeda

Tata letak teks SVG tidak identik dengan dokumen penerbitan desktop. Pengekspor mungkin menggunakan elemen <tspan> bersarang, koordinat individual, text-anchor, atau <textPath>. Aplikasi impor mungkin meratakan, mengelompokkan ulang, atau menafsirkan fitur tersebut. Jika membangun ulang lencana, panduan teks SVG pada path yang dapat diedit memisahkan lambang, kurva panduan, dan huruf aktif agar setiap bagian dapat diuji.

Untuk penempatan dokumen, ikuti alur gambar SVG dan ilustrasi inline dalam Typst. Mempertahankan keterangan sebagai teks dokumen bawaan memungkinkan pemeriksaan huruf ilustrasi terpisah dari penomoran gambar serta tipografi paragraf.

Dokumentasi ekspor SVG Adobe saat ini menyatakan keluaran teks pada path mungkin tidak mempertahankan kesamaan visual di setiap penampil SVG. Dokumentasi juga membedakan keluaran font aktif dari Convert To Outlines, yang mengubah huruf menjadi path vektor untuk mempertahankan tampilan.

Jika font benar tersedia tetapi penempatan masih berubah, periksa struktur, bukan mengganti jenis huruf:

1. bandingkan render browser dengan editor sumber;
2. periksa apakah setiap karakter memiliki posisi x sendiri;
3. periksa transformasi bersarang pada grup teks;
4. lihat apakah pengimpor menghapus text-anchor, kerning, atau pengaturan garis dasar;
5. uji salinan dengan teks horizontal biasa untuk mengisolasi perilaku teks pada path.

Untuk logo, lencana, atau judul satu baris yang tampilannya lebih penting daripada kemampuan pengeditan, kontur biasanya lebih aman untuk penyerahan.

Penyebab 5: Anda mengubah teks menjadi kontur dan mengharapkannya tetap dapat diedit

Teks berkontur tidak mengalami penggantian font karena tidak lagi merujuk font. Namun, hasil impor tetap dapat mengejutkan:

• huruf mungkin masuk sebagai compound path, bukan satu kata yang dapat diedit;
• ruang dalam huruf dapat terisi jika compound path dilepaskan;
• banyak glyph mungkin dikelompokkan bersama;
• aplikasi tujuan terbatas mungkin menggabungkan atau menyederhanakan path;
• file dapat lebih besar daripada versi teks aktif.

Itu perubahan geometri dan kemampuan pengeditan, bukan perubahan font. Jika bentuk sesuai sumber, ekspor kontur telah menjalankan tugasnya.

Selalu simpan dua file:

• Master yang dapat diedit: teks aktif, informasi font asli, lapisan bernama, dan format aplikasi sumber.
• Salinan penyerahan: SVG, EPS, atau PDF berkontur untuk kebutuhan tampilan penting.

Jangan pernah mengubah satu-satunya master menjadi kontur. Perubahan ejaan, terjemahan, atau slogan baru menjadi gambar ulang manual lambat setelah teks berupa path.

Solusi mana yang digunakan?

Tujuan menentukan kompromi. Teks aktif mempertahankan makna serta pengeditan. Kontur mempertahankan tampilan. Satu file tidak dapat memaksimalkan keduanya tanpa membawa ketergantungan tambahan atau data sumber.

Alur pembuatan kontur yang aman

Untuk penyerahan dengan tampilan penting:

1. simpan dokumen sumber dengan teks aktif;
2. duplikat dan tambahkan -outlined atau -delivery pada nama file;
3. pilih teks dan gunakan Create Outlines, Convert to Curves, Object to Path, atau perintah setara;
4. periksa lubang huruf dan bentuk bertumpuk;
5. ekspor SVG;
6. buka SVG di browser dan editor kedua;
7. bandingkan pada ukuran normal dan pembesaran tinggi dengan sumber;
8. kirim file berkontur sambil mengarsipkan master aktif serta informasi lisensi font.

Jangan merasterkan teks hanya untuk menghindari font hilang. PNG dalam SVG mencegah penggantian tetapi membuang geometri path yang dapat diskalakan. Pembuatan kontur mempertahankan vektor nyata.

Jika satu-satunya logo yang tersisa berupa raster

Terkadang teks aktif maupun master berkontur tidak tersisa. Anda mungkin hanya memiliki PNG kecil, JPG, atau tangkapan layar logo. Panduan keputusan pemvektoran logo menjelaskan kapan menelusuri raster dan kapan menggambar ulang. Memasang font tidak dapat memperbaiki raster, dan menemukan jenis huruf serupa mungkin tidak mereproduksi modifikasi huruf khusus.

Di sini PerfectVector membantu secara bersyarat: pemvektoran logo dapat menyusun ulang huruf raster terlihat sebagai bentuk vektor. Hasilnya gambar berkontur, bukan teks aktif yang dipulihkan. Alat ini tidak mengenali font asli, memulihkan pengaturan kerning, atau membuat kata dapat diketik lagi. Gunakan untuk memulihkan geometri logo terlihat, lalu simpan rekonstruksi terpisah dari master baru yang ditata sebagai teks.

Untuk strategi penyerahan lebih luas, panduan format file logo menjelaskan format master dan penyerahan yang perlu disimpan.

FAQ

Mengapa SVG menggunakan font berbeda di komputer lain? SVG mungkin memiliki teks aktif yang menyebut font tidak tersedia di komputer lain. Perender memilih keluarga lain dari daftar pengganti, mengubah bentuk glyph, lebar, jarak, dan terkadang penyelarasan.

Apakah SVG otomatis menyematkan font? Tidak. SVG dapat menyebut font, menerima dari CSS halaman, atau menyertakan sumber daya font, tetapi teks aktif biasa tidak otomatis mengemas file font desktop. Ketersediaan, dukungan browser, dan lisensi font tetap harus ditangani.

Apakah teks SVG sebaiknya diubah menjadi kontur? Ubah salinan penyerahan menjadi kontur ketika tampilan harus tetap, terutama untuk logo, huruf dekoratif, cetak, dan perangkat lunak kerajinan. Pertahankan teks aktif dalam master yang dapat diedit ketika kata, aksesibilitas, pencarian, atau lokalisasi penting.

Mengapa teks berkontur tidak dapat diedit setelah impor? Pembuatan kontur mengganti karakter dengan path vektor. Penerima dapat mengedit node dan bentuk tetapi tidak dapat menempatkan kursor teks atau mengganti font. Itu sesuai harapan, jadi simpan dan bagikan master teks aktif ketika perubahan kata diperlukan nanti.

Bisakah PerfectVector memulihkan font asli dari logo raster? Tidak. PerfectVector dapat menyusun ulang huruf raster terlihat sebagai kontur vektor, tetapi tidak mengenali font asli atau memulihkan karakter yang dapat diedit, kerning, dan pengaturan font. Gunakan ketika tujuannya memulihkan geometri logo terlihat.

Sources

1. W3C — Teks SVG — Isi aktif <text> dan <tspan>, properti font, tata letak, dan dukungan font unduhan.
2. W3C — CSS Fonts Module Level 3 — Pencocokan keluarga font, pemilihan gaya, keluarga hilang, dan pengganti sistem.
3. MDN — SVG font-family — Daftar keluarga berdasarkan prioritas dan pengganti umum dalam SVG.
4. Adobe Illustrator — Membuat teks berkontur — Mengonversi teks menjadi path dan hilangnya kemampuan pengeditan teks.
5. Adobe Illustrator — Menyimpan gambar — Ekspor teks SVG, kontur, dan catatan kompatibilitas teks pada path.

Ketika master hilang dan hanya logo raster tersisa, bangun ulang huruf terlihat sebagai kontur vektor dengan PerfectVector, lalu periksa bentuk di editor kedua. Jika teks aktif masih ada, perbaiki ketergantungan font atau buat salinan penyerahan berkontur, bukan menelusuri ulang.