Konversi TTF ke SVG

Halaman ini mengubah font TrueType menjadi font SVG: satu file XML yang setiap karakternya berupa elemen <glyph> dengan outline yang ditulis sebagai data path SVG. Hasilnya berguna untuk alat icon font dan editor font, tetapi tidak sama dengan gambar teks Anda.

atau jatuhkan file TTF, OTF, WOFF … di sini ·

Maks. 95 MB per file· Hingga 20 file· Dihapus setelah 30 menit

Keluaran

Konversi ke

File diproses di server kami dan dihapus setelah 30 menit.

Cara menggunakan alat ini

1
Unggah TTF
Tambahkan satu atau beberapa file .ttf, hingga 20 per batch dan masing-masing 95 MB. Icon font maupun font teks sama-sama bisa.
2
Biarkan font SVG sebagai keluaran
Konversi ke diatur ke Font SVG. Hinting tidak berlaku untuk keluaran SVG, jadi opsinya tidak muncul; Nama keluarga di Pengaturan lanjutan tetap bisa mengganti nama font.
3
Konversi ke SVG
Tekan Konversi ke SVG lalu unduh file .svg. Buka di editor teks, Inkscape, atau FontForge untuk mengakses path glyph-nya.

Font SVG vs gambar SVG berisi teks

Cari TTF ke SVG dan Anda akan menemukan dua tujuan berbeda yang tercampur. Yang pertama adalah font SVG: format font yang didefinisikan dalam SVG 1.0 Recommendation dari W3C pada 2001, dengan elemen <font> yang berisi satu <glyph> per karakter beserta nilai Unicode, lebar advance, dan outline berupa path. Yang kedua adalah gambar SVG berisi teks, yaitu huruf-huruf logo atau nama yang sudah disusun dalam satu baris dan disimpan sebagai bentuk. Konverter ini menghasilkan jenis pertama. Jika yang Anda miliki adalah gambar logo dan bukan font, PNG ke SVG akan menelusurinya menjadi path.

Mengubah outline TrueType menjadi data path SVG tidak menghilangkan apa pun dari bentuknya. Path SVG mendukung kurva kuadratik yang sama dengan yang dipakai TrueType, jadi setiap kontur ditulis apa adanya. Yang tidak bertahan adalah segala sesuatu di sekitar outline: instruksi hinting, fitur OpenType selain kerning sederhana, dan tabel biner yang dibutuhkan sistem operasi untuk memasang font. Font SVG tidak bisa dipasang di Windows atau macOS.

Seperti apa isi file font SVG

Contoh singkat markup di dalam font SVG

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <font id="NusantaraSans" horiz-adv-x="1229">
      <font-face font-family="Nusantara Sans" units-per-em="2048" ascent="1638" descent="-410" />
      <glyph unicode="L" glyph-name="L" horiz-adv-x="1100" d="M180 0V1456H360V160H1040V0Z" />
    </font>
  </defs>
</svg>

Yang dibuat halaman ini: satu file, satu <glyph> per karakter, dalam unit font dengan sumbu y mengarah ke atas.

Terbuka di FontForge, Inkscape, dan alat icon font
Tidak bisa dipasang di komputer
Tidak dimuat oleh Chrome, Edge, atau Firefox versi terkini

OTF atau TTF biasa dengan tabel SVG tambahan yang berisi glyph berwarna dan berlapis.

Dipasang seperti font lainnya
Dipakai untuk emoji dan huruf multiwarna
Dukungan berbeda-beda menurut aplikasi dan browser

Asal-usul font SVG dan nasibnya kini

SVG 1.0 mendefinisikan elemen font: 2001
Safari iPhone terakhir yang membutuhkan font web SVG: iOS 4.1
menghapus font SVG pada 2014: Chrome 38
menghapus bab tentang font: SVG 2

TTF

Font TrueType

TTF adalah format font TrueType yang dikembangkan oleh Apple pada akhir 1980-an dan dirilis pada 1991, lalu dilisensikan kepada Microsoft. Format ini mendefinisikan garis bentuk glyph dengan kurva kuadratik dan menyertakan instruksi hinting yang membuat teks tampak tajam di layar. TrueType didukung oleh setiap sistem operasi desktop, pengolah kata, dan aplikasi desain. Format ini tidak memiliki sebagian fitur tipografi lanjutan OpenType dan ukurannya lebih besar daripada format font web.

Kompresi: Lossless
Transparansi: –
Animasi: –
Diperkenalkan: 1991 · Apple

Konverter TTF

SVG

Scalable Vector Graphics

SVG adalah format vektor berbasis XML yang distandardisasi oleh W3C pada 2001. Alih-alih piksel, format ini menggambarkan bentuk, path, dan teks, sehingga tetap tajam di ukuran berapa pun dan biasanya sangat kecil untuk logo dan ikon. SVG mendukung transparansi, gaya CSS, skrip, dan animasi, dan setiap browser merendernya secara native. SVG tidak cocok untuk foto, dan ilustrasi yang kompleks bisa menjadi lambat dirender. Illustrator, Inkscape, Figma, dan browser dapat membuka serta mengeditnya.

Kompresi: –
Transparansi: Ya
Animasi: Ya
Diperkenalkan: 2001 · W3C

Konverter SVG

TTF ke SVG menulis outline setiap glyph sebagai data path SVG yang bisa diedit di dalam font SVG, yang dipakai alat icon font, editor font, dan kit webfont lama; ini bukan cara memuat font di halaman web modern.

Tanya jawab konversi TTF ke SVG

Bisakah font SVG dipakai di CSS @font-face saat ini?

Tidak di sebagian besar browser. Chrome menghapus dukungan font SVG di versi 38 pada 2014, sedangkan Firefox dan Internet Explorer tidak pernah menambahkannya. Untuk situs web, ubah TTF dengan TTF ke WOFF2.

Mengapa glyph dari font SVG terbalik saat saya tempel ke gambar?

Font SVG memakai sistem koordinat font itu sendiri, dengan sumbu y mengarah ke atas dari garis dasar, sedangkan gambar SVG biasa menghitung y ke bawah dari tepi atas. Balik path secara vertikal, misalnya dengan transformasi scale(1,-1), dan bentuknya akan tampil benar.

Bagaimana cara mengubah teks menjadi path SVG untuk Cricut atau mesin laser?

Pasang TTF, ketik kata-kata Anda di Inkscape atau Illustrator, lalu ubah teks menjadi outline: Path › Object to Path di Inkscape, Type › Create Outlines di Illustrator. Simpan hasilnya sebagai SVG. Font SVG menyimpan setiap huruf secara terpisah dan tidak tersusun sebagai kata.

Apakah font SVG mempertahankan kerning dan ligatur?

Hanya sebagian. Format font SVG dapat menyimpan pasangan kerning dengan elemen hkern dan glyph multi-karakter, tetapi tidak punya padanan tabel fitur OpenType seperti small caps, alternatif, atau aturan kontekstual. Simpan TTF jika Anda membutuhkan fitur tersebut.

Apakah keluaran font SVG berguna untuk icon font?

Ya, itulah kegunaan utamanya saat ini. Alat icon font seperti IcoMoon mengimpor font SVG, sehingga Anda bisa mengambil ikon dari icon font lama, mengeditnya, lalu membuat set baru atau mengekspor setiap ikon sebagai SVG tersendiri.