Softonic

Generator Generik Lingkaran SVG

Langkah 1 / 2
Berikutnya

Teks pada lintasan bundar sering dipakai pada lencana, segel, dan logo. SVG melakukannya melalui <textPath>, yaitu elemen teks mengikuti lintasan tak terlihat. Alat ini membuat SVG lengkap di peramban. Masukkan teks lalu atur jari-jari, ukuran font, jarak huruf, posisi awal, warna, dan arah lintasan. Setelah itu Anda dapat menyalin atau mengunduh SVG.

Cara melengkungkan teks di sekitar lingkaran

  1. 1

    Masukkan teksnya

    Frasa pendek (3–8 kata) paling mudah dibaca; kalimat panjang sebaiknya disusun secara teratur dengan jarak yang cukup antar bagiannya.

  2. 2

    Atur jari-jari

    Semakin besar jari-jari, semakin halus lengkungnya, sehingga huruf menjadi lebih mudah dibaca; jika terlalu kecil, huruf akan miring secara signifikan.

  3. 3

    Geser titik awal

    Gunakan Persentase offset awal untuk memindahkan karakter pertama sepanjang lintasan. Ini adalah posisi pada lintasan, bukan kontrol rotasi sudut bebas.

  4. 4

    Atur ukuran, jarak, dan arah

    Kontrol yang tersedia mengubah ukuran font, jarak antarhuruf, warna, serta arah lintasan searah atau berlawanan jarum jam.

  5. 5

    Salin SVG

    Hasil keluarannya mencakup jalur visual yang tidak terlihat, kode `<textPath>`, serta penataan font, dan siap digunakan langsung di mana saja dalam halaman.

Bagaimana textPath bekerja secara internal

<svg viewBox="0 0 300 300">
  <defs>
    <path id="ring" d="M 150,150 m -100,0 a 100,100 0 1,1 200,0 a 100,100 0 1,1 -200,0" />
  </defs>
  <text font-family="Inter" font-size="24" font-weight="700">
    <textPath href="#ring" startOffset="50%" text-anchor="middle">
      CDEM SOLUTIONS . EST 2024 .
    </textPath>
  </text>
</svg>

Atribut d menggunakan perintah m/a (moveto/arc) untuk menggambar lingkaran penuh. Selanjutnya, <textPath> menempatkan teks sepanjang lintasan tersebut. startOffset menunjukkan persentase posisi sepanjang jalur, sedangkan text-anchor="middle" menempatkan teks secara tepat di tengah pada posisi yang ditentukan.

Jari-jari vs Keterbacaan

Jari-jari (px) Rasanya Cocok untuk
40–60 Sangat rapat dan terdistorsi Hanya logo abstrak
80–120 Lambang klasik Ikon aplikasi, koin
140–200 Busur halus Logo dan lambang kopi
250+ Hampir lurus Dekorasi header

Preset Umum

  • Bukungan atas, dimulai dari sudut 180° dan membentang sepanjang 180° lingkaran; separuh bagian atasnya dapat dibaca dari kiri ke kanan.
  • Bukit bawah dengan fitur pembalikan arah, balikkan arah jalur atau gunakan kode side="right" agar teks terbaca dengan benar saat dibalik ke atas.
  • Cincin penuh, teks akan melipat satu kali. Tambahkan spaser di awal dan akhir (.) agar titik pertemuan tidak terasa mencolok.

Tips Ekspor

SVG inline memungkinkan Anda menetapkan tema pengisian menggunakan currentColor atau properti khusus CSS.

  • Hindari memasukkan font web ke dalam file SVG; sebaiknya deklarasikan font tersebut dalam kode CSS global Anda agar peramban dapat menggunakan font yang telah dimuat sebelumnya secara otomatis. Jika Anda memerlukan gambar statis (format PNG atau favicon), jalankan file SVG menggunakan alat rasterizer hingga mencapai ukuran akhir yang diinginkan; format SVG dapat diskalakan secara lossless, namun beberapa platform masih membutuhkan format bitmap.

Pertanyaan yang Sering Diajukan

textPath mengikuti arah lintasan. Coba arah berlawanan jarum jam dan geser offset awal sambil melihat pratinjau. Untuk busur bawah yang sangat presisi, edit SVG yang diunduh dengan lintasan terpisah.

Pemilih warna mengubah fill, sedangkan penggeser mengubah ukuran dan jarak huruf. Ketebalan dan keluarga font bukan kontrol pada alat ini, tetapi dapat diedit pada elemen <text> yang disalin dengan SVG/CSS.

<textPath> telah didukung di Chrome, Firefox, Safari, dan Edge selama lebih dari satu dekade. IE11 hanya memberikan dukungan sebagian; jika Anda masih memerlukannya, sebaiknya lakukan pra-rasterisasi pada ikon tersebut.

Tambahkan letter-spacing="2" (atau lebih banyak) pada elemen teks. Pada radius yang kecil, hal ini dapat secara signifikan meningkatkan keterbacaan.

Tidak. Teks dan SVG dibuat di peramban Anda. Frasa tidak dikirim ke server atau disimpan.

Alat Terkait

Pemilih Warna Material Design

Jelajahi palet warna Material Design. Salin nuansa mana pun (dari 50 hingga A700) dalam format HEX, RGB, atau HSL dengan sekali sentuh.

Generator Kertas Bergaris

Buat kertas bergaris siap cetak secara gratis. Pilih garis college, lebar, atau sempit, atur jarak antargaris dalam mm, ukuran kertas, dan garis margin, lalu cetak atau unduh SVG.

Pembuat Undangan

Buat undangan pernikahan, ulang tahun, akikah, atau acara kantor. Sesuaikan tulisan dan warna, lihat pratinjau langsung, lalu unduh PNG siap cetak ukuran 5R.

Inversi Warna Gambar

Balikkan setiap saluran RGB dalam sebuah gambar untuk menghasilkan gambar negatif, berguna untuk pengeditan kreatif dan melihat hasil pemindaian film.

Pemisah Grid Instagram

Bagi gambar lebar menjadi grid Instagram 3×3, atau berapa pun jumlah barisnya. Setiap potongan diberi nomor sehingga mudah diunggah secara terbalik.

Konverter ARW ke JPG

Konversi foto RAW Sony ARW ke JPG. Dapatkan JPEG yang mudah dibagikan dan kompatibel secara universal dari file RAW kamera Anda tanpa membuka Lightroom.

Alat ini tersedia dalam bahasa lain