SVG Font

Format font vector asli — XML yang dapat dibaca manusia yang memetakan SVG paths ke font glyphs.

.svg Format SVG Font
TipeVector berbasis XML
KompresiTidak ada (teks biasa)
Ukuran FileTerbesar dari semua format
DukunganHanya Safari (sudah usang di tempat lain)
Terbaik UntukDebugging, format sumber
BobcornSumber pipeline

Apa Itu SVG Font?

SVG fonts didefinisikan sebagai bagian dari spesifikasi SVG 1.1, yang diterbitkan oleh W3C. Berbeda dengan format font biner tradisional, SVG fonts menyematkan glyph outlines sebagai data SVG path di dalam elemen <font>. Setiap glyph direpresentasikan oleh elemen <glyph> yang atribut d-nya berisi vector path yang menggambarkan bentuk tersebut.

Pada intinya, SVG fonts adalah gambar SVG yang dikemas sebagai font. Sintaks path yang sama yang Anda gunakan untuk menggambar bentuk dalam file SVG digunakan kembali untuk mendefinisikan bentuk huruf dan icon outlines. Hal ini membuat mereka dapat diperiksa secara unik — Anda dapat membuka SVG font di editor teks manapun dan membaca geometri sebenarnya dari setiap glyph.

Cara Kerjanya

Sebuah file SVG font membungkus glyph paths di dalam struktur XML standar. Berikut contoh yang disederhanakan:

Struktur SVG Font 
<font id="MyIcons">
  <font-face font-family="MyIcons" units-per-em="1024"/>
  <glyph glyph-name="home" unicode="&#xE001;"
         d="M512 0L0 448h128v576h256V640h256v384h256V448h128z"/>
  <glyph glyph-name="search" unicode="&#xE002;"
         d="M..."/>
</font>

Elemen <font-face> mendeklarasikan nama font family dan sistem koordinat (units-per-em). Setiap <glyph> memetakan sebuah Unicode code point ke vector path. Atribut d menggunakan sintaks path yang persis sama dengan elemen <path> SVG biasa.

Ini adalah format perantara dalam pipeline Bobcorn. Icon SVG individual pertama-tama dirakit ke dalam struktur SVG font ini, yang kemudian dikonversi ke format biner: SVG Font → TTF → WOFF / WOFF2 / EOT.

Kelebihan & Kekurangan

    Kelebihan
  • Dapat dibaca manusia — buka di editor teks manapun
  • Mudah men-debug glyph paths dan metadata
  • Sepenuhnya berbasis vector, skalabilitas tak terbatas
  • Tidak perlu kompilasi untuk melihat sumber
    Kekurangan
  • Ukuran file terbesar dari semua format font
  • Sudah usang di Chrome, Firefox, dan Edge
  • Tidak ada kompresi sama sekali
  • Tidak ada dukungan hinting
  • Kualitas rendering buruk di Windows

Dukungan Browser

Dukungan SVG font telah dihapus dari sebagian besar browser utama. Chrome menghapus dukungan SVG font pada versi 38 (2014). Firefox tidak pernah mengimplementasikannya. Edge (berbasis Chromium) juga tidak mendukungnya. Satu-satunya yang tersisa adalah Safari dan iOS Safari, yang masih merender SVG fonts.

Untuk penggunaan web praktis, SVG font pada dasarnya adalah format warisan. Anda tidak pernah boleh mengandalkannya sebagai format pengiriman untuk pengguna akhir. Gunakan WOFF2 sebagai gantinya.

Kapan Menggunakan SVG Font

  • Debugging masalah pembuatan font — karena berupa XML biasa, Anda dapat membaca data path secara langsung dan membandingkannya dengan icon SVG asli untuk mendiagnosis masalah.
  • Sebagai format sumber dalam build pipelines — banyak alat pembuatan font (termasuk Bobcorn) menggunakan SVG font sebagai representasi perantara sebelum mengkonversi ke format biner.
  • Dukungan iOS lama < 5 — sangat jarang terjadi saat ini, tetapi perangkat iOS lama yang sebelum mendukung WOFF hanya dapat menggunakan SVG fonts untuk web fonts.
Bobcorn
Di Bobcorn, SVG font adalah langkah pertama dari pipeline pembuatan. Icon SVG Anda dirakit menjadi SVG font, yang kemudian dikonversi ke TTF, dan dari TTF ke WOFF, WOFF2, dan EOT. Anda dapat mengekspor file SVG font untuk tujuan debugging — sangat berguna ketika glyph terlihat salah dan Anda perlu memeriksa data path mentah.