Teks SVG pada Path: Bangun Ulang Tulisan Lencana yang Dapat Diedit

Untuk menempatkan teks SVG pada path, definisikan path dengan ID, rujuk dari <textPath> di dalam <text>, dan tulis kata di antara tag. Untuk tulisan terpusat, gabungkan startOffset="50%" dengan text-anchor="middle". Simpan lambang dalam grup terpisah agar Anda dapat mengubah kata tanpa membangun ulang artwork.

Pemisahan itu berguna ketika memulihkan lencana klub, lambang toko, atau logo acara. Anda mungkin membutuhkan path vektor untuk lambang tengah sambil tetap perlu mengoreksi tanggal atau mengubah nama. Menelusuri seluruh lencana menghasilkan bentuk huruf, bukan string teks yang dapat diedit. Bangun ulang tipografi sebagai teks yang masih dapat diedit ketika susunan kata harus tetap dapat diedit.

Untuk tulisan horizontal di samping lambang, sesuaikan label SVG lurus dengan textLength dan bandingkan perubahan jarak sebelum menyesuaikan proporsi glyph.

Mulai dengan tiga bagian terpisah

Lencana membutuhkan lambang, path panduan, dan teks yang mengikuti path tersebut. Panduan mengendalikan posisi tulisan; panduan tidak harus terlihat dalam desain akhir. Referensi textPath MDN mendokumentasikan koneksi href antara teks dan path-nya.

Untuk contoh di bawah, kami menggambar pohon pinus sederhana dan panduan setengah lingkaran dalam kode SVG. Keduanya merupakan artwork demonstrasi orisinal, bukan output konversi PerfectVector. Lencana bertuliskan PINE TRAIL CLUB; tulisan tetap berupa string teks sepanjang langkah konstruksi.

Bangun lencana yang dapat diedit

Simpan kode ini sebagai badge.svg dan buka di browser. Pertahankan file sebagai master yang dapat diedit. Jika Anda baru mengenal format ini, panduan file SVG kami menjelaskan perbedaan antara teks, path, dan gambar tertanam.

<svg xmlns="http://www.w3.org/2000/svg"
     width="400" height="400" viewBox="0 0 400 400"
     role="img" aria-labelledby="badge-title">
  <title id="badge-title">Pine Trail Club badge</title>
  <defs>
    <path id="badge-arc"
          d="M70 215 A130 130 0 0 1 330 215" />
  </defs>
 
  <circle cx="200" cy="205" r="166"
          fill="#f8f3e7" stroke="#214b41" stroke-width="6" />
  <g id="emblem" fill="#214b41">
    <path d="M200 150 148 220 175 220 133 273
             267 273 225 220 252 220Z" />
    <path d="M188 269H212V303H188Z" />
  </g>
 
  <text fill="#214b41" font-family="Georgia, serif"
        font-size="29" text-anchor="middle">
    <textPath href="#badge-arc" startOffset="50%">PINE TRAIL CLUB</textPath>
  </text>
</svg>

Path dimulai pada (70, 215) dan mengikuti setengah lingkaran atas ke (330, 215). Radiusnya adalah 130 unit. Menempatkan path dalam <defs> membuatnya tersedia untuk referensi tanpa menggambar stroke yang terlihat. Lingkaran luar pucat adalah bentuk berwarna terpisah.

Ubah PINE TRAIL CLUB menjadi nama pendek Anda sendiri, simpan, dan muat ulang. Pohon seharusnya tetap di tempat sementara kata baru mengikuti panduan yang sama. Nama lebih panjang membutuhkan pemeriksaan penyesuaian lain; pemusatan tidak membuat teks sembarang muat pada busur.

Pusatkan dengan offset dan anchor

startOffset="50%" menempatkan posisi referensi teks di tengah sepanjang path. text-anchor="middle" menyejajarkan bagian tengah teks pada posisi tersebut. Yang satu memilih posisi pada kurva; yang lain memilih bagian teks yang ditempatkan di sana. Referensi startOffset dan referensi text-anchor menjelaskan kontrol tersebut.

Coba ubah hanya text-anchor menjadi start. Dengan teks kiri-ke-kanan ini, kata sekarang dimulai pada titik tengah dan berlanjut ke titik akhir kanan. Dalam pengujian browser kami, hal itu memindahkan tulisan ke sisi kanan dan membuat sebagian frasa melampaui busur yang dapat digunakan. Pulihkan middle sebelum menyesuaikan ukuran font.

Untuk lencana simetris, periksa hasil secara visual setelah pemusatan matematis. Huruf memiliki bentuk dan ruang samping berbeda; panjang teks yang terpusat masih dapat membutuhkan penyesuaian optis kecil. Lakukan penyesuaian tersebut secara sengaja alih-alih mengubah beberapa koordinat tak terkait sampai hasil terlihat mendekati.

Periksa arah path sebelum memindahkan teks

Balik busur atas yang sama persis ini dengan mengganti nilai d-nya menjadi:

d="M330 215 A130 130 0 0 0 70 215"

Awal dan akhir bertukar, dan sweep flag busur berubah. Untuk panduan visual kedua flag busur, lihat empat kombinasi flag busur SVG. Kurva geometris tetap di tempat yang sama, tetapi teks mengikutinya ke arah berlawanan. Dalam pengujian browser kami, pembalikan itu mengubah orientasi tulisan. Pulihkan path asli untuk tulisan tegak di sepanjang bagian atas lencana ini.

Pembalikan path berbeda dari membalik ejaan atau menetapkan arah tulisan suatu bahasa. Pertahankan kata tetap utuh. Spesifikasi tata letak teks SVG menjelaskan bagaimana glyph ditempatkan sepanjang path. Untuk baris bawah, buat dan uji panduan bawah terpisah alih-alih menggeser teks atas sampai melintasi lambang.

Pilih font sebelum mengatur jarak akhir

Contoh meminta Georgia, lalu fallback serif generik. Permintaan itu tidak menanamkan font dalam SVG. Renderer memilih jenis huruf yang tersedia dari daftar keluarga, seperti yang dijelaskan dalam referensi font-family MDN.

Dalam demonstrasi Chromium kami, mengalihkan kata yang sama dari Georgia, serif ke Arial, sans-serif mengubah panjang teks yang diukur. Busur dan lambang tidak berubah. Pemeriksaan penting adalah rentang yang ditempati dan tampilan huruf, bukan lebar tertentu yang mungkin dirender berbeda oleh komputer lain.

Untuk lencana nyata, tetapkan font dan ketebalan yang dimaksudkan sebelum menyesuaikan ukuran atau jarak huruf. Kemudian buka kembali SVG dalam lingkungan penggunaannya. Jika font berubah di sana, gunakan panduan pemecahan masalah font SVG untuk mengisolasi substitusi atau perilaku impor.

Jika tulisan melampaui busur, coba frasa lebih pendek, ukuran font lebih kecil, atau panduan lebih lebar. Periksa seluruh lencana setelah setiap perubahan. Meningkatkan radius panduan dapat mendorong tulisan lebih dekat ke batas luar; mengurangi ukuran huruf dapat membuat lencana cetak kecil lebih sulit dibaca. Hindari meregangkan huruf hanya untuk mengisi rentang tetap kecuali distorsi itu bagian dari desain.

Pulihkan hanya artwork yang membutuhkan penelusuran

Jika lambang hanya ada di dalam PNG atau JPG, pisahkan tugas pemulihan dari tugas tipografi. Gunakan salinan sumber yang mengisolasi lambang sebersih mungkin. Simpan sumber asli lengkap sebagai referensi visual untuk membangun ulang lencana.

Vektorisasikan lambang raster dengan PerfectVector, lalu bandingkan siluet, celah dalam, dan detail kecilnya dengan sumber. Gunakan artwork SVG yang diterima dalam grup lambang dan bangun ulang kata secara terpisah dengan font yang dimaksudkan. PerfectVector membuat path vektor dari gambar; alur kerja ini tidak bergantung pada OCR, identifikasi font, atau rekonstruksi otomatis teks melengkung yang dapat diedit.

Ketika lambang vektor asli tersedia, gunakan ulang. Ketika tulisan digambar khusus dan bentuk tidak beraturannya penting, ikuti alur kerja tulisan tangan ke vektor alih-alih menggantinya dengan font. Panduan vektorisasi logo kami membahas keputusan lebih luas antara penelusuran, pengetikan ulang, dan perbaikan manual.

Pohon sederhana dalam contoh menghindari komplikasi impor: lambang yang sudah ada mungkin menggunakan sistem koordinat berbeda atau menyertakan transformasi. Skalakan dan posisikan grup tersebut di dalam viewBox lencana, lalu periksa lagi dengan teks terlihat. Jangan mengubah panduan tulisan untuk mengompensasi lambang yang ditempatkan secara salah.

Simpan master yang dapat diedit dan buat salinan penyerahan

Teks yang masih dapat diedit merupakan master yang berguna ketika nama, tanggal, atau kata dapat berubah. Untuk lencana tetap yang dikirim ke editor atau alat produksi lain, salinan outline menghapus kebutuhan penerima untuk mereproduksi bentuk glyph font. Kata menjadi path vektor dan kehilangan pengeditan teks biasa.

Dalam opsi penyimpanan SVG Illustrator, Convert To Outlines mengonversi teks menjadi path. Adobe juga memperingatkan bahwa teks hasil ekspor pada path dapat dirender berbeda dalam penampil SVG. Itu merupakan alasan untuk memeriksa salinan hasil ekspor di tujuannya, bukan jaminan bahwa setiap alat berikutnya akan mereproduksi seluruh lencana. Lihat dokumentasi penyimpanan SVG Adobe.

Gunakan urutan penyerahan ini:

1. Simpan master teks yang masih dapat diedit sebelum mengubah apa pun menjadi outline.
2. Konfirmasi kata, font, arah path, pemusatan, dan jarak.
3. Buat salinan penyerahan terpisah dan konversikan teksnya menjadi outline di editor Anda.
4. Buka kembali salinan tersebut dan bandingkan semua huruf, ruang kosong huruf, celah, dan lambang.
5. Periksa lencana pada ukuran output yang dimaksudkan dalam aplikasi penerima.

Mengubah menjadi outline membekukan tampilan font yang Anda miliki saat ini. Jika font fallback yang salah aktif ketika Anda membuat outline, Anda membekukan huruf yang salah. Untuk gambar web, pertahankan juga nama aksesibel yang berguna; bentuk huruf outline tidak membawa string teks asli dengan sendirinya.

FAQ

Mengapa teks SVG saya tidak terpusat pada path? Gunakan startOffset="50%" bersama text-anchor="middle" untuk contoh terpusat. Offset 50% dengan anchor start memulai frasa di tengah sepanjang panduan. Periksa juga bentuk path dan apakah seluruh tulisan muat.

Mengapa teks terbalik? Periksa arah panduan. Teks mengikuti path sesuai arah penggambarannya, sehingga membalik path dapat mengubah orientasi tulisan. Uji arah panduan sebelum memindahkan teks atau mengubah ejaannya.

Apakah memvektorisasi lencana membuat teks melengkung yang dapat diedit? Vektorisasi merekonstruksi bentuk huruf yang terlihat sebagai artwork. Untuk kata yang dapat diedit, bangun ulang teks secara terpisah dengan font yang dimaksudkan dan panduan textPath. Simpan master teks yang masih dapat diedit sebelum membuat salinan penyerahan outline.

Sources

1. MDN — textPath — Menghubungkan teks yang masih dapat diedit ke path yang dirujuk.
2. MDN — startOffset — Memposisikan teks sepanjang panduan.
3. MDN — text-anchor — Menyejajarkan teks relatif terhadap posisi referensinya.
4. W3C — Teks SVG 2 — Penempatan glyph dan aturan tata letak teks pada path.
5. MDN — font-family — Font yang tersedia dan pemilihan keluarga fallback.
6. Adobe — Simpan artwork dalam Illustrator — Pembuatan outline teks SVG dan keterbatasan ekspor teks pada path.

Bangun tulisan di sekitar lambang yang diterima dan jaga kata tetap dapat diedit sampai lencana selesai. Jika lambang Anda terperangkap dalam gambar raster, pulihkan path vektornya, periksa detail kecil, dan gunakan artwork yang diterima dalam master lencana Anda.